목차
Javascript HTML DOM EventListener
- description : Javascript HTML DOM EventListener
- author : 오션
- email : shlim@repia.com
- lastupdate : 2021-04-20
Source of the article
The addEventListener() method
예제
<!DOCTYPE html> <html> <body> <h2>JavaScript addEventListener()</h2> <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>
addEventListener() 메서드는 지정한 요소에 이벤트 핸들러를 연결합니다.
addEventListener() 메서드는 기존 이벤트 핸들러를 덮어 쓰지 않고 이벤트 핸들러를 요소에 연결합니다.
하나의 요소에 여러 이벤트 핸들러를 추가할 수 있습니다.
하나의 요소, 즉 두 개의 “클릭”이벤트에 동일한 유형의 여러 이벤트 핸들러를 추가 할 수 있습니다.
HTML 요소뿐만 아니라 모든 DOM 오브젝트, 즉 윈도우 오브젝트에도 이벤트 리스너를 추가할 수 있습니다.
addEventListener() 메서드를 사용하면 이벤트가 버블링(bubbling)에 반응하는 방식을 더 쉽게 제어할 수 있습니다.
addEventListener() 메서드를 사용하면, 가독성을 높이기 위해 JavaScript가 HTML 마크업과 분리되고,
HTML 마크 업을 제어하지 않는 경우에도 이벤트 리스너를 추가할 수 있습니다.
removeEventListener() 메서드를 사용하여 이벤트 리스너를 쉽게 제거할 수 있습니다.
Syntax
element.addEventListener(event, function, useCapture);
첫 번째 매개변수는 이벤트 유형 (예: “click”, “mousedown”또는 기타 HTML DOM Event입니다.
두 번째 매개변수는 이벤트가 발생할 때 호출하려는 함수입니다.
세 번째 매개변수는 이벤트 버블링(bubbling) 또는 이벤트 캡처링(capturing)를 사용할지 여부를 지정하는 boolean 값입니다.
이 매개 변수는 선택 사항입니다.
이벤트에 "on"접두사를 사용하지 않습니다. ''"onclick"''대신 ''"click"''을 사용하십시오.
Add an Event Handler to an Element
사용자가 요소를 클릭하면 “Hello World!” alert 창이 나타납니다.
<script> document.getElementById("myBtn").addEventListener("click", function () { alert("Hello World!"); }) </script>
외부의 명명된 함수를 참조할 수도 있습니다.
예제
사용자가 요소를 클릭하면 “Hello World!” alert 창이 나타납니다.
<script> document.getElementById("myBtn").addEventListener("click", myFunction); function myFunction() { alert("Hello World!"); } </script>
Add Many Event Handlers to the Same Element
addEventListener() 메서드를 사용하면 기존 이벤트를 덮어 쓰지 않고, 동일한 요소에 많은 이벤트를 추가 할 수 있습니다.
예제
<script> var x = document.getElementById("myBtn"); x.addEventListener("click", myFunction); x.addEventListener("click", someotherFunction); function myFunction() { alert("Hello World!"); } function someotherFunction() { alert("This function was also executed"); } </script>
동일한 요소에 다양한 형태의 이벤트를 추가할 수 있습니다.
예제
<script> var x = document.getElementById("myBtn"); x.addEventListener("mouseover", myFunction); x.addEventListener("click", mySecondFunction); x.addEventListener("mouseout", myThirdFunction); function myFunction() { document.getElementById("demo").innerHTML += "Moused over!<br>"; } function mySecondFunction() { document.getElementById("demo").innerHTML += "Clicked!<br>"; } function myThirdFunction() { document.getElementById("demo").innerHTML += "Moused out!<br>"; } </script>
Add an Event Handler to the window Object
addEventListener() 메서드를 사용하면 HTML 요소, HTML 문서, 윈도우 오브젝트 또는 xmlHttpRequest 객체처럼 이벤트를 지원하는 기타 오브젝트와 같은 HTML DOM 객체에 이벤트 리스너를 추가할 수 있습니다.
예제
사용자가 윈도우 크기를 조정할 때 실행되는 이벤트 리스너를 추가합니다.
<script> window.addEventListener("resize", function () { document.getElementById("demo").innerHTML = Math.random(); }); </script>
Passing Parameters
매개변수 값을 전달할 때 매개 변수와 함께 지정된 함수를 호출하는 “익명 함수(anonymous function)“를 사용하십시오.
예제
<script> var p1 = 5; var p2 = 7; document.getElementById("myBtn").addEventListener("click", function () { myFunction(p1, p2); }); function myFunction(a, b) { var result = a * b; document.getElementById("demo").innerHTML = result; } </script>
Event Bubbling or Event Capturing?
HTML DOM에는 버블링(bubbling)과 캡처링(capturing)이라는 두 가지 이벤트 전파 방법이 있습니다.
이벤트 전파는 이벤트가 발생할 때 요소 순서를 정의하는 방법입니다.
<div> 요소 안에 <p> 요소가 있고 사용자가 <p> 요소를 클릭한다면,
어떤 요소의 “click”이벤트를 먼저 처리해야 합니까?
버블링에서, 가장 안쪽에 있는 요소의 이벤트가 먼저 처리된 다음, 외부 요소가 처리됩니다.
<p> 요소의 클릭 이벤트가 먼저 처리된 다음, <div> 요소의 클릭 이벤트가 처리됩니다.
캡처링에서, 가장 바깥 쪽 요소의 이벤트가 먼저 처리된 다음, 내부가 처리됩니다.
<div> 요소의 클릭 이벤트가 먼저 처리된 다음 <p> 요소의 클릭 이벤트가 처리됩니다.
addEventListener() 메소드를 사용하면, “useCapture” 매개 변수를 사용하여, 전파(propagation) 유형을 지정할 수 있습니다.
addEventListener(event, function, useCapture);
기본값은 false이고 버블링 전파를 사용하고, 값이 true로 설정되면 이벤트는 캡처링 전파를 사용합니다.
예제
<script> document.getElementById("myP1").addEventListener("click", function () { alert("You clicked the white element!"); }, false); document.getElementById("myDiv1").addEventListener("click", function () { alert("You clicked the orange element!"); }, false); document.getElementById("myP2").addEventListener("click", function () { alert("You clicked the white element!"); }, true); document.getElementById("myDiv2").addEventListener("click", function () { alert("You clicked the orange element!"); }, true); </script>
The removeEventListener() method
removeEventListener() 메서드는 addEventListener() 메서드로 첨부된 이벤트 핸들러를 제거합니다.
예제
<script> document.getElementById("myDIV").addEventListener("mousemove", myFunction); function myFunction() { document.getElementById("demo").innerHTML = Math.random(); } function removeHandler() { document.getElementById("myDIV").removeEventListener("mousemove", myFunction); } </script>
HTML DOM Style Object Reference
모든 HTML DOM 스타일 속성에 대해서는 HTML DOM Style Object Reference를 참조하십시오.
