[JavaScript] 이벤트 리스너, 이벤트 버블링, 이벤트 객체

이벤트 리스너 

 

이벤트 리스너는 말 그대로 해당 이벤트에 대해 항상 리스닝 하며 대기중이다.  해당 이벤트가 발생했을 때 등록했던 이벤트 리스너가 실행된다.

이벤트 리스너는 on + '이벤트명' 의 구조를 가지고 있다. 

 

document.getElementById('Hello').onclick = function () {
  alert('Hello world');
};

 

이벤트 리스너는 여러 태그에 각각 이벤트를 설정할 수 있다. 모든 DOM들이 이벤트 리스너를 등록할 수 있는 속성들을 갖고 있다.

 

document.addEventListener('contextmenu', function(e){ //contextMenu 오른쪽 마우스 
                e.preventDefault();
             
                console.log('Hello world')
            });

위에 처럼 바로 addEventListener를 붙여줄 수도 있고 

document.querySelector('#clicked').addEventListener('click', function(e){ 른쪽 마우스 
                e.preventDefault();
             
                console.log('Hello world')
            });

태그나 아이디를 선택하는 함수를 이용해서 addEventListener를 붙여줄 수도 있다. 

 

이벤트 버블링

 

<div id="first"><div id="second"><div id="third"></div></div></div>

버블링이란 자식의 이벤트가 부모에도 전달되는 것을 말한다.

위와 같은 구조가 있을 때 div#third를 클릭한 경우, 부모와 조상 태그인 second, first 순으로 같은 클릭 이벤트가 발생한다

 

이벤트 객체

 

DOM에 대한 이벤트에 연결한 함수는 이벤트 객체를 매개변수로 사용할 수 있습니다. 이벤트 객체에는 이벤트에 대한 정보들과 이벤트를 조작하는 메소드들이 들어있다.

 

document.onclick = function(event) {
  event.preventDefault();
  event.stopPropagation();
  event.stopImmediatePropagation();
};

 

대표적인 메소드로 preventDefault와 stopPropagation, stopImmediatePropagation이 있다.

preventDefault 메소드는 태그의 기본 동작(예를 들면, a 태그는 클릭 시 링크이동, form 태그은 폼 내용 전송)을 하지 않게 막아주는 역할을 합니다. stopPropagation 메소드는 태그를 클릭 시 부모에게 이벤트가 전달(버블링)되지 않도록 합니다.

stopImmediatePropagation은 버블링을 막음과 동시에 같은 이벤트의 다른 리스너도 실행되지 않도록 한다. 만약 여러 개의 클릭 이벤트를 동시에 연결한 경우, stopPropagation으로 클릭 이벤트를 막아도 다른 클릭 이벤트는 실행됩니다. 하지만 stopImmediatePropagation으로 클릭 이벤트를 막으면 부모에게는 어떠한 이벤트도 버블링되지 않으면서 다른 클릭 이벤트도 실행되지 않습니다. 단, 다른 종류의 이벤트(마우스 오버 등)는 막지 못합니다.

 

참고

www.zerocho.com/category/JavaScript/post/57432d2aa48729787807c3fc