문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.
======Javascript HTML DOM EventListener======
<WRAP left notice 80%>
  * description : Javascript HTML DOM EventListener 
  * author      : 오션
  * email       : shlim@repia.com
  * lastupdate  : 2021-04-20
</WRAP>
<WRAP clear></WRAP>
\\
=====Source of the article==== 
  * [[https://www.w3schools.com/js/js_htmldom_eventlistener.asp|Javascript HTML DOM EventListener]]
\\
=====The addEventListener() method=====
====예제====
<code javascript>
<!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>
</code>
\\
%%addEventListener()%% 메서드는 지정한 요소에 이벤트 핸들러를 연결합니다.\\
\\
%%addEventListener()%% 메서드는 기존 이벤트 핸들러를 덮어 쓰지 않고 이벤트 핸들러를 요소에 연결합니다.\\
\\
하나의 요소에 여러 이벤트 핸들러를 추가할 수 있습니다.\\
\\
하나의 요소, 즉 두 개의 "클릭"이벤트에 동일한 유형의 여러 이벤트 핸들러를 추가 할 수 있습니다.\\
\\
%%HTML%% 요소뿐만 아니라 모든 DOM 오브젝트, 즉 윈도우 오브젝트에도 이벤트 리스너를 추가할 수 있습니다.\\
\\
''%%addEventListener()%%'' 메서드를 사용하면 이벤트가 버블링(bubbling)에 반응하는 방식을 더 쉽게 제어할 수 있습니다.\\
\\
''addEventListener()'' 메서드를 사용하면, 가독성을 높이기 위해 %%JavaScript%%가 %%HTML%% 마크업과 분리되고,\\ 
%%HTML%% 마크 업을 제어하지 않는 경우에도 이벤트 리스너를 추가할 수 있습니다.\\
\\
''removeEventListener()'' 메서드를 사용하여 이벤트 리스너를 쉽게 제거할 수 있습니다.\\

====Syntax====
<code javascript>
element.addEventListener(event, function, useCapture);
</code>
첫 번째 매개변수는 이벤트 유형 (예: ''"click"'', ''"mousedown"''또는 기타 [[https://www.w3schools.com/jsref/dom_obj_event.asp|HTML DOM Event]]입니다.\\
\\
두 번째 매개변수는 이벤트가 발생할 때 호출하려는 함수입니다.\\
\\
세 번째 매개변수는 이벤트 버블링(bubbling) 또는 이벤트 캡처링(capturing)를 사용할지 여부를 지정하는 boolean 값입니다.\\ 
이 매개 변수는 선택 사항입니다.\\
\\
  이벤트에 "on"접두사를 사용하지 않습니다. ''"onclick"''대신 ''"click"''을 사용하십시오.
  
=====Add an Event Handler to an Element=====
사용자가 요소를 클릭하면 "Hello World!" alert 창이 나타납니다.\\
<code javascript>
  <script>
    document.getElementById("myBtn").addEventListener("click", function () {
      alert("Hello World!");
    })
  </script>
</code>
\\
외부의 명명된 함수를 참조할 수도 있습니다.\\

====예제====
사용자가 요소를 클릭하면 "Hello World!" alert 창이 나타납니다.\\
<code javascript>
  <script>
    document.getElementById("myBtn").addEventListener("click", myFunction);

    function myFunction() {
      alert("Hello World!");
    }
  </script>
</code>
\\
=====Add Many Event Handlers to the Same Element=====
''addEventListener()'' 메서드를 사용하면 기존 이벤트를 덮어 쓰지 않고, 동일한 요소에 많은 이벤트를 추가 할 수 있습니다.\\

====예제====
<code javascript>
  <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>
</code>
\\
동일한 요소에 다양한 형태의 이벤트를 추가할 수 있습니다.\\

====예제====
<code javascript>
  <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>
</code>

=====Add an Event Handler to the window Object=====
''addEventListener()'' 메서드를 사용하면 %%HTML%% 요소, %%HTML%% 문서, 윈도우 오브젝트 또는 ''xmlHttpRequest'' 객체처럼 이벤트를 지원하는 기타 오브젝트와 같은 %%HTML DOM%% 객체에 이벤트 리스너를 추가할 수 있습니다.\\

====예제====
사용자가 윈도우 크기를 조정할 때 실행되는 이벤트 리스너를 추가합니다.\\
<code javascript>
  <script>
    window.addEventListener("resize", function () {
      document.getElementById("demo").innerHTML = Math.random();
    });
  </script>
</code>

=====Passing Parameters=====
매개변수 값을 전달할 때 매개 변수와 함께 지정된 함수를 호출하는 "익명 함수(anonymous function)"를 사용하십시오.\\

====예제====
<code javascript>
  <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>
</code>

=====Event Bubbling or Event Capturing?=====
%%HTML DOM%%에는 버블링(bubbling)과 캡처링(capturing)이라는 두 가지 이벤트 전파 방법이 있습니다.\\
\\
이벤트 전파는 이벤트가 발생할 때 요소 순서를 정의하는 방법입니다.\\
%%<div>%% 요소 안에 %%<p>%% 요소가 있고 사용자가 %%<p>%% 요소를 클릭한다면,\\ 
어떤 요소의 "click"이벤트를 먼저 처리해야 합니까?\\
\\
버블링에서, 가장 안쪽에 있는 요소의 이벤트가 먼저 처리된 다음, 외부 요소가 처리됩니다.\\ 
%%<p>%% 요소의 클릭 이벤트가 먼저 처리된 다음, %%<div>%% 요소의 클릭 이벤트가 처리됩니다.\\
\\
캡처링에서, 가장 바깥 쪽 요소의 이벤트가 먼저 처리된 다음, 내부가 처리됩니다.\\ 
%%<div>%% 요소의 클릭 이벤트가 먼저 처리된 다음 %%<p>%% 요소의 클릭 이벤트가 처리됩니다.\\
\\
%%addEventListener()%% 메소드를 사용하면, "useCapture" 매개 변수를 사용하여, 전파(propagation) 유형을 지정할 수 있습니다.\\
\\
<code javascript>
addEventListener(event, function, useCapture);
</code>
\\
기본값은 false이고 버블링 전파를 사용하고, 값이 true로 설정되면 이벤트는 캡처링 전파를 사용합니다.\\

====예제====
<code javascript>
  <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>
</code>

=====The removeEventListener() method=====
''removeEventListener()'' 메서드는 %%addEventListener()%% 메서드로 첨부된 이벤트 핸들러를 제거합니다.\\

====예제====
<code javascript>
  <script>
    document.getElementById("myDIV").addEventListener("mousemove", myFunction);

    function myFunction() {
      document.getElementById("demo").innerHTML = Math.random();
    }

    function removeHandler() {
      document.getElementById("myDIV").removeEventListener("mousemove", myFunction);
    }
  </script>
</code>





=====HTML DOM Style Object Reference=====
모든 %%HTML DOM%% 스타일 속성에 대해서는 [[https://www.w3schools.com/jsref/dom_obj_style.asp|HTML DOM Style Object Reference]]를 참조하십시오.


{{tag>오션, Javascript HTML DOM EventListener}}
문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

문서 도구
