자바스크립트는 addEventListener() 이벤트 핸들러를 연결하는 메소드 지정된 요소에. 이 메서드는 기존 이벤트 핸들러를 덮어쓰지 않고 이벤트 핸들러를 요소에 연결합니다. 한 번에 많은 이벤트 핸들러를 요소에 추가할 수 있습니다.
addEventListener() 메서드를 사용하면 이벤트가 버블링에 반응하는 방식을 더 쉽게 제어할 수 있습니다. . 마우스 오버, 클릭 등과 같은 많은 이벤트를 적용할 수 있습니다.
예시
다음 예에서 마우스오버 이벤트가 할당됩니다. 따라서 버튼에 마우스를 놓으면 출력에 표시된 대로 요청된 텍스트가 표시됩니다.
<html>
<body>
<p>This example uses the addEventListener() method to attach a mouseover event to a button.</p>
<input type = "button" id="myBtn" value = "listener">
<p id="listener"></p>
<script>
document.getElementById("myBtn").addEventListener("mouseover", displayText);
function displayText() {
document.getElementById("listener").innerHTML =
document.write("Tutorix is the best e-learning platform");
}
</script>
</body>
</html> 위의 코드를 실행하면 화면에 다음이 표시됩니다.
마우스오버하면 "listener" 버튼을 누르면 다음 출력이 실행됩니다.
출력
