JavaScript 이벤트 객체 이해_javascript 팁

DOM에서 이벤트가 발생하면 이벤트 객체 이벤트가 생성됩니다.

DOM의 이벤트 객체

DOM 호환 브라우저는 이벤트 객체를 이벤트 핸들러에 전달합니다. 이벤트 객체에는 이를 생성한 특정 이벤트와 관련된 속성 및 메서드가 포함되어 있습니다. 구분의 이벤트 유형이 다르며 사용 가능한 속성 방법이 다릅니다. 그러나 모든 이벤트에는 아래 표에 나열된 구성원이 있습니다.

레벨 2 DOM 이벤트 표준에 정의된 속성은 다음과 같습니다.

• bubbles: 이벤트가 버블 이벤트 유형인지 여부를 나타내는 부울 값을 반환합니다.
  
• cancelable: 이벤트에 취소 가능한 기본 작업이 있을 수 있는지 여부를 나타내는 부울 값을 반환합니다.
  
• currentTarget: 이벤트 리스너가 이 이벤트를 트리거한 요소를 반환합니다.
  
• eventPhase: 이벤트 전파의 현재 단계를 반환합니다.
  
• target: 이 이벤트를 트리거한 요소(이벤트의 대상 노드)를 반환합니다.
  
• timeStamp: 이벤트가 생성된 날짜와 시간을 반환합니다.
  
• type: 현재 Event 개체가 나타내는 이벤트 이름을 반환합니다.
  

아래 목록은 Level 2 DOM 이벤트 표준에서 정의한 메서드입니다. IE의 이벤트 모델은 다음 메서드를 지원하지 않습니다.

• initEvent(): 새로 생성된 Event 객체의 속성을 초기화합니다.
• preventDefault(): 이벤트와 관련된 기본 작업을 수행하지 않도록 브라우저에 알립니다.
• stopPropagation(): 더 이상 이벤트를 전달하지 않습니다.

이, 대상, 현재Target

이벤트 핸들러 내에서 객체 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까지 버블링됩니다.

1. 종류

하나의 함수로 여러 이벤트를 처리해야 하는 경우 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;

2.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()를 사용하여 기본 동작을 취소할 수 있다는 점에 유의해야 합니다.

3. 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과 같습니다.
  

예:

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 버블링 단계

위 내용은 JavaScript 이벤트 객체에 대한 내용인데, 모든 분들의 학습에 도움이 되었으면 좋겠습니다.