자바스크립트 Event :: addEventListener/ removeEventListener 메서드

 

 

 

addEventListener

: 특정 이벤트가 발생했을 시, 특정 함수를 실행할 수 있게 해주는 기능.

---

 

 

 

 addEventListener으로 등록할 수 있는 이벤트 중 자주 쓰이는 이벤트 목록

 

이벤트 명	설명
change	변동이 있을 때 발생
click	클릭 시 발생
focus	포커스를 얻었을 때 발생
keydown	키를 눌렀을 때 발생
keyup	키에서 손을 땟을 때 발생
load	로드가 완료 되었을 때 발생
mousedown	마우스를 클릭 했을 때 발생
mouseout	마우스가 특정 객체 밖으로 나갔을 때 발생
mouseover	마우스가 특정 객체 위로 올려졌을 때 발생
mousemove	마우스가 움직였을 때 발생
mouseup	마우스에서 손을 땟을 때 발생
select	option 태그 등에서 선택을 햇을 때 발생

 

 

 

 

 

element.addEventListener('click', doSomething, false);

 

1번째 인자는 이벤트명이다.
2번째 인자는 콜백 함수로, 이벤트가 발생되면 실행된다.
3번째 인자는 useCapture 라 불리는 불린값으로, 이벤트 버블링이나 캡쳐링을 사용할것인지 나타낸다.

 

 

 

 

 

 

[ *  버블링이나 캡쳐링 관련 설명 링크 * ]

 

[javascript] 이벤트 버블링(bubbling)과 캡처링(capturing) 차이점

 

 

 

 

 

위의 코드는 꽤 익숙하다.

특히 1, 2번째 인자는 모두 아는 내용일 것이다.
하지만 3번째 인자값을 다르게 줄 수 있다는 것은 많이 알려지지 않았다.
새로운 인자는 options 객체로 이렇게 생겼다.

 

 

 

 

 

element.addEventListener('click', doSomething, {             capture: false,             once: true,             passive: false          });

 

 

 

 

위 문법은 각기 다른 3개의 속성으로 한정되어있다. 

• capture - 불린. 위에 언급된 useCapture 와 동일한 인자.
• once - 불린. true 면 이벤트가 딱 한번만 발생됨.
• passive - 불린. true 면 콜백 함수내부에 preventDefault() 가 있다 하더라도 실행되지 않음.

 

 

 

이 중 가장 흥미로운 것은 once 옵션이다.

이것은 removeEventListener() 를 사용하거나,

한번만 실행하기 위해 복잡한 기술을 사용해야 되는 상황을 더 편하게 만들어 준다.

jQuery 를 사용해봤다면 .one() 메소드에 익숙할 것이다.

 

 

---

 

 

 

removeEventListener

: 등록된 이벤트리스너를 지우는 역할을 합니다.

---

 

 

 

- 사용법

 

addEventListener 

   var st = document.getElementById( ' stalker ' ); st.addEventListener( ' 이벤트종류 ' ,  ' 함수이름 ' );

 

 

addEventListener

   (이벤트리스너가 등록된 후)

   st.removeEventListener( ' 이벤트종류 ' ,  ' 함수이름 ' );