logo

TechCodeview

자바스크립트 addEventListener()

그만큼 추가이벤트리스너() 메소드는 특정 요소에 이벤트 핸들러를 연결하는 데 사용됩니다. 기존 이벤트 핸들러를 재정의하지 않습니다. 이벤트는 JavaScript의 필수적인 부분이라고 합니다. 웹페이지는 발생한 이벤트에 따라 응답합니다. 이벤트는 사용자가 생성하거나 API를 통해 생성될 수 있습니다. 이벤트 리스너는 이벤트 발생을 기다리는 JavaScript의 프로시저입니다.

addEventListener() 메소드는 다음의 내장 함수입니다. 자바스크립트 . 기존 이벤트 핸들러를 덮어쓰지 않고도 특정 요소에 여러 이벤트 핸들러를 추가할 수 있습니다.

통사론

 element.addEventListener(event, function, useCapture);

세 개의 매개변수가 있지만 매개변수는 이벤트 그리고 기능 널리 사용됩니다. 세 번째 매개변수는 선택적으로 정의할 수 있습니다. 이 함수의 값은 다음과 같이 정의됩니다.

매개변수 값

이벤트: 필수 매개변수입니다. 이벤트 이름을 지정하는 문자열로 정의할 수 있습니다.

참고: 매개변수 값에 'on'과 같은 접두사를 사용하지 마세요. 예를 들어 'onclick' 대신 'click'을 사용하세요.

기능: 필수 매개변수이기도 합니다. 이것은 자바스크립트 기능 이벤트 발생에 응답합니다.

np 도트

사용캡처: 선택적 매개변수입니다. 이벤트가 버블링 단계에서 실행되는지 캡처 단계에서 실행되는지를 지정하는 Boolean 유형의 값입니다. 가능한 값은 다음과 같습니다. 진실 그리고 거짓 . true로 설정되면 이벤트 핸들러가 캡처 단계에서 실행됩니다. false로 설정되면 핸들러는 버블링 단계에서 실행됩니다. 기본값은 다음과 같습니다. 거짓 .

addEventListener() 메서드 사용에 대한 몇 가지 그림을 살펴보겠습니다.

예

addEventListener() 메소드를 사용하는 간단한 예제입니다. 주어진 것을 클릭해야합니다 HTML 버튼 효과를 보려면.

addEventListener() 메서드의 예.

효과를 보려면 다음 버튼을 클릭하세요.

나를 클릭하세요 document.getElementById('btn').addEventListener('click', fun); function fun() { document.getElementById('para').innerHTML = 'Hello World' + '
' + 'javaTpoint.com에 오신 것을 환영합니다'; }지금 테스트해보세요

산출

자바스크립트 addEventListener()

주어진 HTML 버튼을 클릭하면 출력은 다음과 같습니다.

자바스크립트 addEventListener()

이제 다음 예에서는 기존 이벤트를 덮어쓰지 않고 동일한 요소에 많은 이벤트를 추가하는 방법을 살펴보겠습니다.

'사자와 호랑이의 차이점은 무엇입니까'

예

이 예에서는 동일한 요소에 여러 이벤트를 추가합니다.

동일한 요소에 여러 개의 이벤트를 추가하는 예입니다.

효과를 보려면 다음 버튼을 클릭하세요.

Click me function fun() { Alert('javaTpoint.com에 오신 것을 환영합니다'); } function fun1() { document.getElementById('para').innerHTML = '두 번째 함수입니다.'; } function fun2() { document.getElementById('para1').innerHTML = '세 번째 함수입니다.'; } var mybtn = document.getElementById('btn'); mybtn.addEventListener('클릭', 재미); mybtn.addEventListener('click', fun1); mybtn.addEventListener('click', fun2);지금 테스트해보세요

산출

자바스크립트 addEventListener()

이제 버튼을 클릭하면 경고가 표시됩니다. 주어진 HTML 버튼을 클릭하면 출력은 다음과 같습니다.

자바스크립트 addEventListener()

경고를 종료하면 출력은 다음과 같습니다.

자바의 tostring 메소드
자바스크립트 addEventListener()

예

이 예에서는 동일한 요소에 다른 유형의 여러 이벤트를 추가합니다.

동일한 요소에 서로 다른 유형의 여러 이벤트를 추가하는 예입니다.

효과를 보려면 다음 버튼을 클릭하세요.

Click me function fun() { btn.style.width = '50px'; btn.style.height = '50px'; btn.style.Background = '노란색'; btn.style.color = '파란색'; } function fun1() { document.getElementById('para').innerHTML = '두 번째 함수입니다.'; } function fun2() { btn.style.width = ''; btn.style.height = ''; btn.style.Background = ''; btn.style.color = ''; } var mybtn = document.getElementById('btn'); mybtn.addEventListener('mouseover', fun); mybtn.addEventListener('click', fun1); mybtn.addEventListener('mouseout', fun2);지금 테스트해보세요

산출

자바 람다 표현식
자바스크립트 addEventListener()

버튼 위로 커서를 이동하면 출력은 다음과 같습니다.

자바스크립트 addEventListener()

버튼을 클릭하고 커서를 놓으면 출력은 다음과 같습니다.

자바스크립트 addEventListener()

이벤트 버블링 또는 이벤트 캡처

이제 우리는 JavaScript addEventListener()의 세 번째 매개변수의 사용을 이해했습니다. 캡쳐를 사용하세요.

HTML DOM에서는 버블링 그리고 캡처 이벤트 전파의 두 가지 방법입니다. 예를 들어 이러한 방식을 이해할 수 있습니다.

그 안에 div 요소와 단락 요소가 있고 다음을 적용한다고 가정합니다. '딸깍 하는 소리' 이벤트를 두 사람 모두에게 사용하여 추가이벤트리스너() 방법. 이제 문제는 요소의 클릭 이벤트가 먼저 처리되는 단락 요소를 클릭하는 것입니다.

그래서, 버블링, 단락 요소의 이벤트가 먼저 처리되고 그 다음 div 요소의 이벤트가 처리됩니다. 즉, 버블링에서는 내부 요소의 이벤트가 먼저 처리되고 가장 바깥쪽 요소의 이벤트가 처리됩니다.

~ 안에 캡처 div 요소의 이벤트가 먼저 처리되고 단락 요소의 이벤트가 처리됩니다. 이는 캡처 시 외부 요소의 이벤트가 먼저 처리되고 가장 안쪽 요소의 이벤트가 처리된다는 의미입니다.

자바 안녕하세요 세계 예제 
 addEventListener(event, function, useCapture);

다음을 사용하여 전파를 지정할 수 있습니다. useCapture 매개변수. false(기본값)로 설정하면 이벤트가 버블링 전파를 사용하고, true로 설정하면 캡처 전파가 발생합니다.

우리는 다음을 이해할 수 있습니다. 버블링 그리고 캡처 일러스트레이션을 사용합니다.

예

이 예에는 두 개의 div 요소가 있습니다. 첫 번째 div 요소에서는 버블링 효과를 볼 수 있고 두 번째 div 요소에서는 캡처 효과를 볼 수 있습니다.

첫 번째 div 요소의 범위 요소를 두 번 클릭하면 div 요소보다 범위 요소의 이벤트가 먼저 처리됩니다. 그것은이라고 버블링 .

그러나 두 번째 div 요소의 범위 요소를 두 번 클릭하면 div 요소의 이벤트가 범위 요소보다 먼저 처리됩니다. 그것은이라고 캡처 .

 div{ background-color: lightblue; border: 2px solid red; font-size: 25px; text-align: center; } span{ border: 2px solid blue; } This is a div element. <br> <br> <span id="s2"> This is a span element. </span> document.getElementById(&apos;d1&apos;).addEventListener(&apos;dblclick&apos;, function() {alert(&apos;You have double clicked on div element&apos;)}, false); document.getElementById(&apos;s1&apos;).addEventListener(&apos;dblclick&apos;, function() {alert(&apos;You have double clicked on span element&apos;)}, false); document.getElementById(&apos;d2&apos;).addEventListener(&apos;dblclick&apos;, function() {alert(&apos;You have double clicked on div element&apos;)}, true); document.getElementById(&apos;s2&apos;).addEventListener(&apos;dblclick&apos;, function() {alert(&apos;You have double clicked on span element&apos;)}, true);
지금 테스트해보세요

산출

자바스크립트 addEventListener()

효과를 보려면 특정 요소를 두 번 클릭해야 합니다.