캠프 10주 2일차 TIL : javascript. onclick, addEventListener차이와 장단점

오늘

머신러닝강의가 지급됐고 새로운 주차가 시작되는 날이었다. 그런데 집중이하나도 안 된다 큰일이다 오늘을 날릴 수 없기에 그나마 공부하고 있던 js crud를 이어서 들었다. js문법에 대해서 추가로 더 알게 됐다.

우선 onclick이라는 함수와 addEventListener 함수가 있다 각함수는 공통점이 있지만 차이점도 분명히 있다. 우선 각함수를 작성하면 onclick함수경우에는 html에서 먼저 작성해줘야 한다.

<ul class="test_ul">
    <li class="test_li li1" onclick="test_li()">1번째 li</li>
    <li class="test_li li2">2번째 li</li>
    <li class="test_li li3">3번째 li</li>
</ul>

<li class="test_li li1" onclick="test_li()">1번째 li</li>

이렇게 작성해서 넣어준다 그리곤 js파일에서 함수 test_li()를 만들어준다.

function test_li() {
    console.log('1번째 li onclick입니다.')
}

이렇게 작성하고 콘솔창에서 출력해 보면

이렇게 출력되는 방식이다. 이제 addEventListener 확인해 보면

이건 선택가능한 class, id, tag가 존재해야 한다. onclick과의차이점은 이 부분도 있다. onclick은 id, class, tag 상관없이 내가 넣어주고 싶은 tag에 추가해 주면 바로작동이 되는데 addEventListener 사용하려면 변수를 만들어주고 해당변수를 실행시켜 줄 이벤트를 추가하는 것이다. 문법은 다르지만 onclick함수처럼 들어가는 내용은 같다.

// 변수선언
let li2 = document.querySelector(".li2") 

//click이벤트작성
li2.addEventListener('click', function () {
    console.log('2번째 li addEventListener입니다.')
})

addEventListener 또한 onclick처럼 똑같이 콘솔에 출력된다.

둘의 차이를 설명하자면 onclick은 사용이 편하고 addEventListener는 쓸 때마다 변수를 생성해 주고 그에 맞게 for문도 사용 해줘야 하는 부분이 있다. 그래도 addEventListener 는 여러 이벤트헨들러를 넣어줄 수 있다. 그에 비해서 onclick은 하나의 이벤트헨들러(click, scroll, mouseover etc..)만 적용이 가능하기에 다양한 이벤트를 사용할 수 없다는 단점이 있다. 

말이 너무 이상하다 onclick은 이벤트헨들러사용에 있어서 click만 사용하는 단점이 있고, 장점으로는 click이벤트라면 하나의 함수로 여러 곳에서 사용이 가능하다. 반면에 addEventListener 사용할 부분에 대한 class, id, tag로 선언된 변수가 있어야 하고 각 변수(element)마다 사용하고자 하는 이벤트헨들러를 작성하여 준다.

element.addEventListener ("이벤트헨들러",function(){
    //실행할 함수
})

오늘의 규파팡이 느낀 점!

javscript는 python처럼 다양한 걸 실행할 수 있는 즐거움이 있다.

TIL 대표이미지