JavaScript 이벤트 여러 개 걸어 두기 (vanilla js 또는 jQuery 로 event 2개 이상 걸기)

- 이벤트 덮어쓰기 - 

버튼에 클릭 이벤트를 추가하려고 한다.
처음에 아래와 같은 형태로 이벤트를 추가했다.

btn.onclick = funcA;

그런데 이벤트가 적용이 되지 않았다.
이유는 밑에서 다른 이벤트로 덮어쓰고 있었기 때문이다.

btn.onclick = funcB;

위에서 onclick은 btn 안에 있는 특정 속성 값을 변경한다.
한 번에 하나씩밖에 들어가지 못한다.
먼저 다른 값이 있다면,  나중에 들어오는 값이 덮어쓴다.

물론 이런 기능이 필요할 때도 있다.
어떤 이벤트를 특정하게 하나만 갖도록 만들고 싶다면 
onclick이나 onchange 같은 속성 값을 건드리면 된다.

한 번에 여러 이벤트들을 걸어 놓고 싶은 때도 있다.
둘 모두 작동하도록 만들려면 어떻게 해야 할까?

 

- 한 요소에 여러 이벤트 걸기 -

덮어쓰지 않고 새로운 이벤트를 더 추가하고 싶다면 

아래처럼 addEventListener 함수를 이용하면 된다.

ele.addEventListener('click', funcA);
ele.addEventListener('change', funcB);

addEventListener는 아래처럼 jQuery 로 편하게 적용할 수 있다.

 $('a[name="btn"]').click(function(e) {
    e.preventDefault();
 });

addEventListener 함수는 이벤트 기능을 새로 추가하는 기능이므로,
여러 가지 이벤트를 동시에 적용할 수 있다.

 

요소에 어떤 이벤트들이 걸려 있는지 확인하고 싶다면
크롬에서 개발자 모드를 열고 요소를 클릭한 뒤
Event Listeners 탭을 통해서 편하게 확인할 수 있다.

 

 

- 여러 요소에 한 이벤트 걸기 - 

이벤트를 거는 요소가 하나가 아닐 때도 있다.
버튼 하나에 이벤트를 걸 때도 있지만
테이블 같은 경우에는 행마다 이벤트를 걸어야 할 때도 있다.
어떻게 해야 할까.

jQuery 를 사용한다면 바꿀 부분 없이 그대로 써도 된다.
selector로 뽑아 온 결과가 여러 개여도 모두에 적용된다.

 $('a[name="btn"]').click(function(e) {
    e.preventDefault();
 });

jQuery 를 사용하지 않는다면 위처럼 js로 구현할 수 있다.

let aBtn = document.querySelectorAll('a[name="btn"]');
aBtn.forEach((ele) => {
    ele.addEventListener('click', (e) => {
        e.preventDefault();
    });
});

-220404