탄탄대로
[addEventListener ①] 공식문서 읽어보기 본문
프로젝트 중에 Vue에서 팝업을 띄워야하는 경우가 있었다. 그냥 Javascript를 썼다면 parent 같은 명령어를 써서 부모창과 자식 창이 정보를 주고 받을 수 있을텐데 Vue에서는 불가능했다.
모달 창으로 띄우면 좋았을텐데 외부 API를 호출해서 사용하는 경우라 Redirect를 시켜야 했기 때문에 window.open()을 써야만했다. 구글 세상을 떠돌아다닌 결과 Vue에서는 대부분 addEventListener를 통해 팝업창과 통신하는 것 같았다. 그래서 나도 그렇게 구현했고 결과 값을 함수로 잘 받아 처리했다.
그런 의미로 알아보는 addEventListener 함수.
일단 공식 문서를 papago로 번역했다.
EventTarget.addEventListener() - Web APIs | MDN
The addEventListener() method of the EventTarget interface sets up a function that will be called whenever the specified event is delivered to the target.
developer.mozilla.org
addEventListener()
EventTarget 인터페이스의 addEventListener() 메서드는 지정된 이벤트가 대상으로 전달될 때마다 호출될 함수를 설정합니다.
공통 대상은 Element 또는 해당 하위, Document 및 Window이지만 대상은 이벤트를 지원하는 모든 개체 (예:XMLHttpRequest)일 수 있습니다.
addEventListener() 메서드는 함수 또는 EventListener를 구현하는 개체를 호출되는 이벤트 대상의 지정된 이벤트 유형에 대한 이벤트 수신기 목록에 추가하여 작동합니다. 함수 또는 개체가 이미 이 대상에 대한 이벤트 수신기 목록에 있으면 함수 또는 개체가 두 번째로 추가되지 않습니다.
이벤트 수신기가 다른 수신기 내부(즉, 이벤트 처리 중)에서 이벤트 수신기를 이벤트 대상에 추가하는 경우 해당 이벤트는 새 수신기를 트리거하지 않습니다. 그러나 새 수신기는 버블링 단계와 같은 이벤트 흐름의 이후 단계에서 트리거될 수 있습니다.
addEventListener() 메서드는 이벤트 수신기를 등록하는 데 권장되는 방법입니다. 이점은 다음과 같습니다:
1. 이벤트에 대해 둘 이상의 핸들러를 추가할 수 있습니다. 이것은 특히 라이브러리, 자바스크립트 모듈 또는 다른 라이브러리나 확장자와 잘 작동해야 하는 다른 종류의 코드에 유용합니다.
2. onXYZ 속성을 사용하는 것과는 대조적으로, 수신기가 활성화될 때(캡처 대 버블) 위상을 더 세밀하게 제어할 수 있습니다.
3. HTML이나 SVG 요소뿐만 아니라 모든 이벤트 대상에서 작동합니다.
특정 익명 함수가 특정 대상에 대해 등록된 이벤트 수신기 목록에 있고 코드에서 나중에 addEventListener 호출에 동일한 익명 함수가 제공되면 두 번째 함수도 해당 대상에 대한 이벤트 수신기 목록에 추가됩니다.
실제로 익명 함수는 반복적으로 호출되는 동일한 불변 소스 코드를 사용하여 정의되더라도 동일하지 않습니다.
이러한 경우 동일한 명명되지 않은 함수를 반복적으로 정의하는 것은 문제가 될 수 있습니다. 아래 메모리 문제를 참조하십시오
syntex
addEventListener(type, listener)
addEventListener(type, listener, options)
addEventListener(type, listener, useCapture)
Parameters
- type
수신할 이벤트 유형을 나타내는 대소문자 구분 문자열입니다. - listener
지정된 유형의 이벤트가 발생할 때 알림을 받는 개체(이벤트 인터페이스를 구현하는 개체)입니다. 이것은 null이거나, handleEvent() 메서드가 있는 개체이거나, JavaScript 함수여야 합니다. 콜백 자체에 대한 자세한 내용은 이벤트 수신기 콜백을 참조하십시오. - options
이벤트 수신기에 대한 특성을 지정하는 개체입니다. 사용 가능한 옵션은 다음과 같습니다:
- capture
이 유형의 이벤트가 DOM 트리 아래의 이벤트 대상으로 디스패치되기 전에 등록된 수신기로 디스패치됨을 나타내는 부울 값입니다. 지정하지 않으면 기본값은 false입니다. - once
수신기를 추가한 후 최대 한 번 호출해야 함을 나타내는 부울 값입니다. true이면 호출 시 수신기가 자동으로 제거됩니다. 지정하지 않으면 기본값은 false입니다. - passive
참일 경우 수신기에서 지정한 함수가 preventDefault()를 호출하지 않음을 나타내는 부울 값입니다. 수동 수신기가 preventDefault()를 호출하는 경우 사용자 에이전트는 콘솔 경고를 생성하는 것 외에는 다른 작업을 수행하지 않습니다. 지정하지 않으면 기본값이 false로 설정됩니다. 단, Safari 이외의 브라우저에서는 휠, 마우스 휠, 터치 시작 및 터치 이동 이벤트에 대해 기본값이 true로 설정됩니다. 자세한 내용은 수동형 수신기로 스크롤 성능 향상을 참조하십시오. - signal
중단 신호. 지정된 AbortSignal 개체의 abort() 메서드가 호출되면 수신기가 제거됩니다. 지정하지 않으면 수신기에 중단 신호가 연결되지 않습니다.
- capture
- useCapture
이 유형의 이벤트가 DOM 트리 아래의 이벤트 대상으로 디스패치되기 전에 등록된 수신기로 디스패치되는지 여부를 나타내는 부울 값입니다. 트리를 통해 위쪽으로 버블링되는 이벤트는 캡처를 사용하도록 지정된 수신기를 트리거하지 않습니다. 이벤트 버블링과 캡처는 두 요소가 모두 해당 이벤트에 대한 핸들을 등록했을 때 다른 요소 내에 중첩된 요소에서 발생하는 이벤트를 전파하는 두 가지 방법입니다. 이벤트 전파 모드는 요소가 이벤트를 수신하는 순서를 결정합니다. 자세한 설명은 DOM 레벨 3 이벤트 및 JavaScript 이벤트 순서를 참조하십시오. 지정하지 않은 경우 캡처 기본값을 false로 사용합니다. - wantsUntrusted
Firefox(Gecko) 관련 매개 변수입니다. 참일 경우, 수신기는 웹 콘텐츠에 의해 발송된 합성 이벤트를 수신합니다(브라우저 크롬의 경우 기본값은 false이고 일반 웹 페이지의 경우 true입니다). 이 매개 변수는 브라우저 자체뿐만 아니라 추가 기능에 있는 코드에도 유용합니다.
Return value
None (undefined)
The event listener callback
이벤트 수신기는 콜백 함수 또는 handleEvent() 메서드가 콜백 함수 역할을 하는 개체로 지정할 수 있습니다.
콜백 함수 자체는 handleEvent() 메서드와 동일한 매개 변수 및 반환 값을 갖습니다. 즉, 콜백은 발생한 이벤트를 설명하는 이벤트에 기반한 개체라는 단일 매개 변수를 수락하지만 아무것도 반환하지 않습니다.
이전 버전의 DOM 사양에서 addEventListener()의 세 번째 매개 변수는 캡처를 사용할지 여부를 나타내는 부울 값이었습니다. 시간이 지나면서 더 많은 선택지가 필요하다는 것이 분명해졌습니다. 세 번째 매개변수는 함수에 더 많은 매개변수를 추가하는 것이 아니라 이벤트 수신기를 제거하는 과정을 구성하기 위해 옵션의 값을 정의하는 다양한 속성을 포함할 수 있는 객체로 변경되었습니다.
오래되지 않은 브라우저뿐만 아니라 오래된 브라우저도 세 번째 매개 변수를 부울로 가정하기 때문에 이 시나리오를 지능적으로 처리하려면 코드를 빌드해야 합니다. 관심 있는 각 옵션에 대해 기능 탐지를 사용하여 이 작업을 수행할 수 있습니다.