Javascript : addEventListener 의 3번째 options 인자

 

 

 

 

 

 

addEventListener() 는 웹 요소에 이벤트를 거는것으로 많이 사용된다. 대부분 이런 모습이다.

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

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

 

위의 코드는 꽤 익숙하다. 특히 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() 메소드에 익숙할 것이다.