DOM에서 이벤트가 발생하면 이벤트 객체 이벤트가 생성됩니다.
DOM의 이벤트 객체
DOM 호환 브라우저는 이벤트 객체를 이벤트 핸들러에 전달합니다. 이벤트 객체에는 이를 생성한 특정 이벤트와 관련된 속성 및 메서드가 포함되어 있습니다. 구분의 이벤트 유형이 다르며 사용 가능한 속성 방법이 다릅니다. 그러나 모든 이벤트에는 아래 표에 나열된 구성원이 있습니다.
레벨 2 DOM 이벤트 표준에 정의된 속성은 다음과 같습니다.
아래 목록은 Level 2 DOM 이벤트 표준에서 정의한 메서드입니다. IE의 이벤트 모델은 다음 메서드를 지원하지 않습니다.
이, 대상, 현재 대상
이벤트 핸들러 내에서 객체 this는 항상 currentTarget의 값과 동일하며 target에는 이벤트의 실제 대상만 포함됩니다. 이벤트 핸들러가 대상 요소에 직접 할당된 경우 this, currentTarget 및 target에는 동일한 값이 포함됩니다. 예:
var btn = document.querySelector("#btn"); btn.onclick=function () { console.log(event.currentTarget === this); //true console.log(event.target === this); //true }
클릭 이벤트의 대상이 btn 버튼이므로 이 세 가지 값은 동일합니다. 이벤트 핸들러가 버튼의 상위 노드(document.body)에 있는 경우 이러한 값은 동일하지 않습니다. 예:
var btn = document.querySelector("#btn"); document.body.onclick=function () { console.log(event.currentTarget === document.body); //true console.log(this === document.body); //true console.log(event.target === btn); //true 因为btn没有注册事件处理程序,所以该click事件就冒泡到了document.body }
여기서 this와 currentTarget은 모두 document.body입니다. 이벤트 핸들러가 이 요소에 등록되어 있기 때문입니다. 그러나 대상 요소는 클릭 이벤트의 실제 대상이기 때문에 버튼 요소와 동일합니다. 버튼에는 등록된 이벤트 핸들러가 없으므로 클릭 이벤트는 이벤트를 처리할 수 있는 document.body까지 버블링됩니다.
유형
함수를 통해 여러 이벤트를 처리해야 하는 경우 type 속성을 사용할 수 있습니다. 예:
//获取按钮 var btn = document.querySelector("#btn"); //设置多个事件 var handler = function() { //检测事件的类型 switch (event.type) { case "click": console.log("i click it"); break; case "mouseover": console.log("i enter it"); break; case "mouseout": console.log("i leave it"); break; } } //给响应的事件赋值 btn.onclick = handler; btn.onmouseover = handler; btn.onmouseout = handler; preventDefault()
특정 이벤트의 기본 동작을 방지하려면 이 방법을 사용할 수 있습니다. 예:
var aTags = document.getElementsByTagName("a"); for (var i = 0; i < aTags.length; i++) { var currentATag = aTags[i]; currentATag.onclick = function() { event.preventDefault(); } };
위 코드는 웹페이지의 모든 태그 하이퍼링크 기능을 차단합니다. 취소 가능 속성이 true로 설정된 이벤트만 PreventDefault()를 사용하여 기본 동작을 취소할 수 있다는 점에 유의해야 합니다.
stopPropagation()
DOM 계층 구조에서 이벤트 전파를 즉시 중지합니다. 즉, 추가 이벤트 캡처 또는 버블링을 취소합니다. 예를 들어 버튼에 직접 추가된 이벤트 핸들러는 이 메서드를 호출하여 document.body에 등록된 이벤트 핸들러가 트리거되는 것을 방지할 수 있습니다. 예:
var btn = document.getElementById("btn"); btn.onclick = function () { console.log("btn clicked"); // event.stopPropagation(); }; window.onclick = function () { console.log("clicked"); }; //单击一下的结果: //btn clicked //clicked
또 다른 예:
var btn = document.getElementById("btn"); btn.onclick = function () { console.log("btn clicked"); event.stopPropagation(); }; window.onclick = function () { console.log("clicked"); }; //单击一下的结果: //btn clicked
이벤트 단계
이 속성은 이벤트가 현재 이벤트 흐름의 어느 단계에 있는지 확인하는 데 사용됩니다.
1. 캡처 단계인 경우
2. 대상 객체 단계인 경우
와 같습니다.
3. 버블링 단계라면
3과 같습니다.
예:
var btn = document.getElementById("btn"); document.body.addEventListener("click", function() { console.log("bodyListener" + event.eventPhase); }, true) //捕获阶段 btn.onclick = function() { console.log("btn" + event.eventPhase); } //目标对象阶段,实际上属于冒泡阶段(在btn上) document.body.onclick = function() { console.log("body" + event.eventPhase); } //冒泡阶段(在body上)
또 다른 예:
var btn = document.getElementById("btn"); document.body.addEventListener("click", function() { console.log(event.eventPhase); //1 console.log(event.currentTarget); //HTMLBodyElement }, true); btn.addEventListener("click", function() { console.log(event.eventPhase); //2 console.log(event.currentTarget); //HTMLInputElement }); document.body.addEventListener("click", function() { console.log(event.eventPhase); //3 console.log(event.currentTarget); //HTMLBodyElement });
대략적인 과정은 다음과 같습니다.
document.body 캡처 단계 --> btn 대상 개체 단계 --> document.body 버블링 단계
위 내용은 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다.