-
[javascript] 60. DOM Event Listener - 자바스크립트 강좌 JS / CSEWeb/JavaScript 2015. 6. 13. 15:40
JavaScript HTML DOM EventListener
1. The addEventListener() method
사용자가 버튼을 클릭 했을 때 이벤트 리스너를 추가하는 예제입니다.
12345678910111213141516171819202122<!DOCTYPE html><html><body><p>This example uses the addEventListener() method to attach a click event to a button.</p><button id="myBtn">Try it</button><p id="demo"></p><script>document.getElementById("myBtn").addEventListener("click", displayDate);function displayDate() {document.getElementById("demo").innerHTML = Date();}</script></body></html>cs addEventListener() 메소드는 특정 요소에 이벤트 핸들러를 첨부하는 것 입니다.
addEventListener() 메소드는 기존에 존재하는 이벤트 핸들러에 덮어쓰기 없이 요소에 이벤트 핸들러를 첨부하는 것 입니다.
하나의 요소에 여러 이벤트 핸들러를 추가 할 수 있습니다.
HTML 요소 뿐만 아니라 여러 DOM 객체에도 이벤트 리스너를 추가 할 수 있습니다.
addEventListener() 메소드를 사용 할 때, 자바스크립트는 HTML 마크업에서 부터 자바스크립트를 더 좋은 가독성을 위해 분리합니다.
removeEventListener() 메소드를 통해 쉽게 이벤트 리스너를 분리 할 수 있습니다.
2. Syntax
element.addEventListener(event, function, useCapture);
첫 번째 매개변수는 이벤트의 종류 입니다(click 이나 mousedown과 같은).
두 번째 매개변수는 이벤트가 발생 했을 때, 호출할 함수 입니다.
세 번째 매개변수는 선택적으로 작성 할 수 있습니다.
3. Add an Event Handler to an Element
요소를 클릭 했을 때 Hello World 알림창을 띄우는 예제입니다:
함수를 선언하여 사용 할 수 도 있습니다.
123456element.addEventListener("click", myFunction);function myFunction() {alert ("Hello World!");}cs 4. Add Many Event Handlers to the Same Element
addEventLister() 메소드는 같은 요소에 이미 존재하는 이벤트의 덮어씌움없이 여러 이벤트를 추가 할 수 있습니다.
12element.addEventListener("click", myFunction);element.addEventListener("click", mySecondFunction);cs 5. Add an Event Handler to the Window Object
addEventListener() 메소드는 HTML 요소나, HTML 문서, window 객체, xmlHttpRequest 객체와 같은 지원되는 이벤트 종류의 다른 객체와 같은 어떤 HTML DOM 객체를 이벤트 리스너로 추가하는 것을 허용합니다.
12345678910111213141516171819<!DOCTYPE html><html><body><p>This example uses the addEventListener() method on the window object.</p><p>Try resizing this browser window to trigger the "resize" event handler.</p><p id="demo"></p><script>window.addEventListener("resize", function(){document.getElementById("demo").innerHTML = Math.random();});</script></body></html>cs 6. Event Bubbling or Event Capturing?
HTML DOM에서 이벤트를 전파(Propagation)하는 2 가지 방법이 있습니다: bubbling 과 capturing
이벤트 전파는 이벤트가 발생 할 때, 요소의 순서를 정의하는 방법입니다. <div> 요소 안에 <p> 요소가 있다면,
사용자가 <p> 요소를 클릭 헀는데, 어떤 걸 먼저 처리 해야 할 지 알 수 없습니다.
bubbling 방법은, 가장 내부의 요소의 이벤트가 먼저 처리되고 다음에 바깥의 요소가 처리되는 방식입니다:
- <p> 요소 클릭 이벤트가 먼저 처리되고, 다음으로 <div> 요소의 이벤트가 먼저 처리됩니다.
capturing 방법은, bubbling의 반대 입니다.
addEventListener() 메소드에서 전파 종류를 명시 하려고 할 때는 "useCapture" 매개변수를 이용 합니다:
addEventListener(event, function, useCapture);기본 값은 false이고, 이때 bubbling 전파를 사용하게 되고, true로 설정하면, capturing 전파를 사용하게 됩니다.
123document.getElementById("myP").addEventListener("click", myFunction,true);document.getElementById("myDiv").addEventListener("click", myFunction,true);cs 7. The removeEventListener() method
removeEventListener() 메소드는 addEventListener() 메소드로 추가한 이벤트 핸들러를 제거하는 메소드 입니다:
12element.removeEventListener("mousemove", myFunction);cs 8. Browser Support
Method addEventListener() 1.0 9.0 1.0 1.0 7.0 removeEventListener() 1.0 9.0 1.0 1.0 7.0 [ 출처: W3Schools ]
'Web > JavaScript' 카테고리의 다른 글
[javascript] 63. DOM Node List - 자바스크립트 강좌 JS / CSE (0) 2015.06.13 [javascript] 62. DOM Node - 자바스크립트 강좌 JS / CSE (0) 2015.06.13 [javascript] 61. DOM Navigation - 자바스크립트 강좌 JS / CSE (0) 2015.06.13 [javascript] 59. DOM Event - 자바스크립트 강좌 JS / CSE (0) 2015.06.13 [javascript] 58. DOM CSS - 자바스크립트 강좌 JS / CSE (0) 2015.06.13 [javascript] 57. DOM HTML - 자바스크립트 강좌 JS / CSE (0) 2015.06.13
