JavaScript 이벤트 스트림 및 이벤트 핸들러_javascript 팁 알아보기
- WBOY원래의
- 2016-05-16 15:18:221098검색
이 글에서는 자바스크립트 이벤트 흐름과 이벤트 핸들러를 전체적으로 소개하고 참고용으로 공유합니다.
1. 이벤트 흐름
이벤트 흐름은 페이지에서 수신된 이벤트의 순서를 설명합니다. IE의 이벤트 흐름은 이벤트 버블링 흐름인 반면 Netscape Communicator의 이벤트 흐름은 이벤트 캡처 흐름입니다.
2. 이벤트 버블링
즉, 이벤트는 처음에 가장 구체적인 요소에 의해 수신된 다음 덜 구체적인 노드로 위쪽으로 전파됩니다. 예:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> </head> <body> <div>Click</div> </body> </html>
페이지의 div 요소를 클릭하면 클릭 이벤트가 다음 순서로 전파됩니다.
- div 요소
- 본체 요소
- html 요소
- 문서 개체
3. 이벤트 캡쳐
이벤트 캡처의 개념은 가장 구체적인 노드가 이벤트를 마지막에 수신해야 한다는 것입니다. 이벤트 캡처의 목적은 이벤트가 대상에 도달하기 전에 이벤트를 캡처하는 것입니다.
페이지의 div 요소를 클릭하면 클릭 이벤트가 다음 순서로 전파됩니다.
- 문서 개체
- html 태그
- 본문태그
-
div 태그
사양에서는 이벤트가 문서 개체에서 전파되어야 한다고 요구하지만 브라우저는 일반적으로 창 개체에서 이벤트 캡처를 시작합니다. 이전 버전의 브라우저에서는 이를 지원하지 않기 때문에 일반적으로 이벤트 버블링을 사용합니다.
4. DOM 이벤트 흐름
"DOM2 수준 이벤트"에서 지정하는 이벤트 흐름에는 이벤트 캡처 단계, 대상 단계 및 이벤트 버블링 단계의 세 단계가 포함됩니다.
DOM 이벤트 스트림에서 실제 대상은 캡처 단계에서 이벤트를 수신하지 않습니다. 즉, 캡처 단계에서는 문서에서 HTML로, 그리고 본문으로 이동한 후 이벤트가 중지됩니다. 다음 단계는 이벤트가 div 내에서 발생하고 이벤트 처리에서 버블링 단계의 일부로 간주되는 "대상" 단계입니다. 그런 다음 버블링 단계가 발생합니다. IE8 및 이전 버전은 DOM 이벤트 스트리밍을 지원하지 않습니다. 결과적으로 대상 객체에서 이벤트를 조작할 수 있는 기회가 두 번 있습니다.
5. 이벤트 핸들러
이벤트는 사용자나 브라우저 자체가 수행하는 특정 작업입니다. 이벤트 핸들러(또는 이벤트 리스너)는 이벤트에 응답하는 함수입니다. onload, onclick 등과 같이 이벤트 핸들러의 이름은 "on"으로 시작합니다.
6. HTML 이벤트 핸들러
버튼을 클릭할 때 일부 js 코드를 실행하려면 다음과 같이 작성할 수 있습니다.
<div onclick="alert('Clicked')">Click</div>
참고: 이스케이프 처리되지 않은 HTML 구문 문자는 내부에서 사용할 수 없습니다.
페이지의 다른 곳에 정의된 스크립트를 호출할 수도 있습니다.
<script>
function showMessage () {
document.write("fdas");
}
</script>
<input type="button" value="Click Me" onclick="showMessage()" />
이벤트 핸들러의 코드는 실행 시 전역 범위의 모든 코드에 액세스할 수 있습니다.
이를 사용하면 요소 속성 값을 캡슐화하는 함수가 생성됩니다. 이 함수에는 이벤트 객체인 지역 변수인 event가 있습니다.
<input type="button" value="Click Me" onclick="alert(event.type)" />
여기서 this 값은 다음과 같은 이벤트의 대상 요소와 같습니다.
<input type="button" value="Click Me" onclick="alert(this.value)" />
HTML 이벤트 핸들러에는 문제가 많으므로 js에서 지정한 이벤트 핸들러를 사용해야 합니다
7. DOM 레벨 0 이벤트 핸들러
js를 사용하여 이벤트 핸들러를 지정하려면 먼저 작업할 개체에 대한 참조를 얻어야 합니다.
각 요소에는 고유한 이벤트 핸들러 속성이 있으며 일반적으로 onclick과 같이 모두 소문자입니다. 예:
<input type="button" value="Click Me" id="btn" />
<script>
document.querySelector("#btn").onclick = function() {
console.log("hello");
}
</script>
DOM 레벨 0 메서드를 사용하여 지정된 이벤트 핸들러는 요소의 메서드로 간주됩니다. 따라서 현재 이벤트 핸들러는 요소의 범위에서 실행됩니다. 즉, 이는 현재 요소를 참조합니다.
<input type="button" value="Click Me" id="btn" />
<script>
document.querySelector("#btn").onclick = function() {
console.log(this.type);
}
</script>
이런 방식으로 추가된 이벤트 핸들러는 이벤트 흐름의 버블링 단계에서 처리됩니다.
DOM 레벨 0 메소드를 통해 지정된 이벤트 핸들러 제거:
btn.onclick = null;
8. DOM2 레벨 이벤트 핸들러
addEventListener()
이 메서드는 처리할 이벤트 이름, 이벤트 핸들러 함수 및 부울 값이라는 세 가지 매개변수를 받습니다. 부울 값이 true이면 캡처 단계에서 이벤트 핸들러를 호출한다는 의미이고, false이면 이벤트 핸들러를 호출한다는 의미입니다. 버블링 단계 핸들러에서 이벤트를 호출합니다. 예:
var btn = document.getElementById("btn");
btn.addEventListener("click", function () {
console.log(this.id);
})
버튼에 다음과 같은 여러 이벤트 핸들러를 추가할 수도 있습니다.
var btn = document.getElementById("btn");
btn.addEventListener("click", function () {
console.log(this.id);
})
btn.addEventListener("click", function () {
console.log(this.value);
})
removeEventListener()
var btn = document.getElementById("btn");
function info () {
console.log(this.value);
}
btn.addEventListener("click", info);
btn.addEventListener("click", function () {
console.log(this.id);
});
btn.addEventListener("click", function valueAndId () {
console.log(this.value + " " + this.id);
});
btn.removeEventListener("click", info); //有效
btn.removeEventListener("click", function () {
console.log(this.id);
}); //无效
btn.removeEventListener("click", valueAndId); //报错无效
대부분의 경우 이벤트 핸들러는 다양한 브라우저와의 호환성을 극대화하기 위해 이벤트 흐름의 버블링 단계에 추가됩니다.
위 내용은 JavaScript 이벤트 스트림 및 이벤트 핸들러에 관한 모든 내용이 모든 사람의 학습에 도움이 되기를 바랍니다.