HTML DOM addEventListener() 메서드

<시간/>

HTML DOM addEventListener() 메소드는 지정된 요소에 이벤트 핸들러를 첨부하는 데 사용됩니다.

다음은 구문입니다 -

element.addEventListener(event, function, capture)

위의 매개변수에는 -

가 포함됩니다.

이벤트: 이벤트의 이름입니다. 필수.
기능: 이벤트 발생 시 실행할 함수입니다. 필수.
캡처: 캡처 단계에서 이벤트를 실행해야 하는지 여부입니다. 이 검사는 부울 값을 표시합니다. 참 또는 거짓.

이제 DOM addEventListener() 메서드를 구현하는 예를 살펴보겠습니다. -

예시

<!DOCTYPE html>
<html>
<body>
<h2>Demo Heading</h2>
<button id="btn">Click</button>
<p id="myid"></p>
<script>
   var x = document.getElementById("btn");
   x.addEventListener("mouseover", one);
   x.addEventListener("click", two);
   function one() {
      document.getElementById("myid").innerHTML += "Button hovered! "
   }
   function two() {
      document.getElementById("myid").innerHTML += "!!Button Clicked!! "
   }
</script>
</body>
</html>

출력

HTML DOM addEventListener() 메서드

이제 클릭하면 "Button clicked"라는 메시지가 표시됩니다. 버튼을 마우스로 가리키면 다음 텍스트가 표시됩니다. "Button hovered" -

HTML DOM addEventListener() 메서드