자바스크립트 HTML DOM EventListener

The addEventListener() method

Example

사용자가 버튼을 클릭할 때 작동하는(fires), event listener를 추가합니다:

이 예제에서는, addEventListener() 메소드를 사용하여, 버튼에 click 이벤트를 연결합니다.

addEventListener() 메소드는 지정된 요소(element)에 event handler를 연결합니다.

addEventListener() 메소드는 기존 event handlers를 덮어쓰지 않고, 요소(element)에 event handler를 연결합니다.

하나의 요소(element)에 많은 event handlers를 추가할 수 있습니다.

하나의 요소(element)에 같은 유형(type)의 많은 event handlers(예: 2개의 “click” 이벤트)를 추가할 수 있습니다.

HTML 요소(elements)뿐만 아니라, 모든 DOM 객체(object)에 event listeners를 추가할 수 있습니다. 즉, 윈도우 객체(window object).

addEventListener() 메소드로, 이벤트가 bubbling에 반응하는 방법을, 쉽게 제어할 수 있습니다.

addEventListener() 메소드를 사용할 때, 자바스크립트는 HTML 마크업(markup)과 분리됩니다. 가독성을 높이기 위해, HTML 마크업을 제어하지 않을 때도, event listeners를 추가할 수 있습니다.

removeEventListener() 메소드를 사용하여, 쉽게 event listener를 제거할 수 있습니다.


구문

첫 번째 매개변수(parameter)는 이벤트 유형(type) (예: "click" 또는 "mousedown")입니다.

두 번째 매개변수는 이벤트가 발생할 때 호출할 함수입니다.

세 번째 매개변수는 이벤트 버블링(bubbling) 또는 이벤트 캡처링(capturing)을 사용할지 여부를 지정하는 부울(boolean) 값입니다. 이 매개 변수는 선택적입(optional)니다.


요소(Element)에 Event Handler 추가

Example

이 예제는 addEventListener() 메소드를 사용하여 click 이벤트를 버튼에 연결합니다.

외부의 “명명된(named)”함수를 참조할 수도 있습니다:

Example

이 예제는, addEventListener() 메소드를 사용하여, 사용자가 버튼을 클릭할 때 함수를 실행합니다.


같은 요소(Element)에 많은 Event Handlers 추가

addEventListener() 메소드를 사용하여, 기존 이벤트를 덮어쓰지 않고, 동일한 요소에 많은 이벤트를 추가할 수 있습니다:

Example

이 예제는, addEventListener() 메소드를 사용하여, 동일한 버튼에 2개의 클릭 이벤트를 추가합니다.

동일한 요소(element)에 다른 유형(types)의 이벤트를 추가할 수 있습니다:

Example

이 예제는, addEventListener() 메소드를 사용하여, 동일한 버튼에 많은 이벤트를 추가합니다.


윈도우 객체(Window Object)에 Event Handler 추가

addEventListener() 메소드를 사용하여 HTML DOM 객체에 event listeners를 추가할 수 있습니다. HTML DOM 객체에는 HTML elements, HTML document, window object 또는 xmlHttpRequest 객체와 같은 기타 객체(other objects) 등이 있습니다.

Example

이 예제는 window object에 addEventListener() 메소드를 사용합니다.

“resize” event handler를 트리거하여, 이 브루우저 윈도우 크기를 조정합니다.


매개변수 전달(Passing Parameters)

매개변수 값을 전달할 때, 매개변수를 사용하여 지정된(specified) 함수를 호출하는, “익명 함수(anonymous function)”를 사용합니다:

Example

이 예제는, addEventListener() 메소드를 사용할 때, 매개변수 값을 전달하는 방법을 보여줍니다.

계산을 하려면 버튼을 클릭하십시오.


이벤트 Bubbling 또는 이벤트 Capturing?

HTML DOM에서, 버블링(bubbling)과 캡처링(capturing), 2가지 방법으로 이벤트 전파(propagation)가 가능합니다.

이벤트 전파(propagation)는 이벤트가 발생할 때 요소 순서(element order)를 정의하는 방법입니다. <div> 요소 안에 <p> 요소가 있을 때, 사용자가 <p> 요소를 클릭하면, 어떤 요소의 “click” 이벤트가 먼저 처리되어야 합니까?

bubbling에서는 가장 안쪽 요소의 이벤트를 먼저 처리하고 바깥 쪽 요소의 이벤트를 처리합니다: <p> 요소의 click 이벤트를 먼저 처리한 후, <div> 요소의 click 이벤트를 처리합니다.

capturing에서는 제일 바깥 쪽 요소의 이벤트를 먼저 처리하고, 안 쪽 요소의 이벤트를 처리합니다: <div> 요소의 click 이벤트를 먼저 처리하고, <p> 요소의 click 이벤트를 처리합니다.

addEventListener() 메소드로, “useCapture” 매개변수를 사용하여, 전파 유형(propagation type)을 지정할 수 있습니다:

기본값은 false입니다.이 값은 bubbling 전파를 사용합니다. 값을 true로 설정하면, 이벤트는 capturing 전파를 사용합니다.

Example

이 예제는 event listeners를 추가할 때, bubbling과 capturing의 차이점을 보여줍니다.

Click this paragraph, I am Bubbling.

Click this paragraph, I am Capturing.


removeEventListener() 메소드

removeEventListener() 메소드는, addEventListener() 메소드로 연결된, event handlers를 제거합니다:

Example

이 div 요소에는, 이 주황색 필드 내로 마우스를 이동할 때마다 임의의 숫자(random number)를 표시하는, onmousemove event handler가 있습니다.

DIV의 event handler를 제거하려면 버튼을 클릭합니다.


지원 브라우저 (Browser Support)

표의 숫자는 이 메소드(methods)를 완전히 지원하는 첫 번째 브라우저 버전입니다.

Method Chrome I.E Firefox Safari Opera
addEventListener() 1.0 9.0 1.0 1.0 7.0
removeEventListener() 1.0 9.0 1.0 1.0 7.0

참고: addEventListener() 및 removeEventListener() 메소드는 IE 8 및 이전 버전과 Opera 6.0 및 이전 버전에서는 지원되지 않습니다. 그러나 이러한 특정 브라우저 버전의 경우 attachEvent() 메소드를 사용하여 event handlers를 요소에 연결하고, detachEvent() 메소드를 사용하여 요소를 제거할 수 있습니다:

Example

addEventListener() 메소드는 Internet Explorer 8 및 이전 버전에서 지원되지 않습니다.

이 예제는 모든 브라우저에서 사용할 수 있는 솔루션을 보여줍니다.


HTML DOM 이벤트 객체 참조(Event Object Reference)

모든 HTML DOM events 목록은, HTML DOM Event Object Reference를 참조하십시오.

출처: JavaScript HTML DOM EventListener ❮ PreviousNext ❯

답글 남기기