집 > 기사 > 웹 프론트엔드 > JS 이벤트 버블링 및 이벤트 캡처(그래픽 튜토리얼, 간단한 폭력)

JS 이벤트 버블링 및 이벤트 캡처(그래픽 튜토리얼, 간단한 폭력)

亚连원래의: 2018-05-19 09:47:231642검색

이 글은 주로 JS의 이벤트 버블링과 이벤트 캡쳐링에 대해 소개하고 있으며, 코드 예시를 통해 둘의 차이점을 자세히 설명하고 있습니다. 필요한 친구들은 참고하시면 됩니다.

학교에서 선생님께서 이벤트 버블링과 이벤트에 대해 설명하시는 것을 들었습니다. 캡처 메커니즘은 Tingtianshu와 동일합니다. IE는 이벤트 버블링을 사용하는 반면 다른 브라우저는 이벤트 캡처를 사용한다는 점만 기억합니다. 당시에는 IE 브라우저 호환성 문제로 간주하여 자세히 알아보지 않았습니다(IE8 이하 브라우저는 기본적으로 시장에서 퇴출되었습니다). 작업 이후로 이런 유형의 문제에 여러 번 직면했지만 깊이 조사한 적이 없습니다. 항상 부분적으로 이해하고 추측에 의존합니다(작동하지 않으면 A를 선택하고 B를 선택하십시오). 오늘 할 일이 없을 때 데모를 해보니 드디어 이 문제를 완전하게 이해하게 되었습니다.

먼저 결론: 타이밍 문제를 유발하는 이벤트를 설명하는 용어입니다. 이벤트 캡처는 문서에서 이벤트를 트리거하는 노드까지, 즉 위에서 아래로 이벤트를 트리거하는 프로세스를 말합니다. 대조적으로, 이벤트 버블링은 상향식으로 이벤트를 트리거합니다. 바인딩된 이벤트 메서드의 세 번째 매개변수는 이벤트 트리거 시퀀스가 이벤트 캡처인지 여부를 제어하는 것입니다. true, 이벤트 캡처, false, 이벤트 버블링. 기본값은 false입니다. 이는 이벤트가 버블링됨을 의미합니다. Jquery의 e.stopPropagation은 버블링을 방지합니다. 즉, 제가 아는 한 아버지와 조상의 이벤트가 트리거되지 않습니다.

이것은 HTML 구조입니다

  <p id="parent">
　　  <p id="child" class="child"></p>
  </p>

이제 이벤트를 이벤트에 바인딩합니다

  document.getElementById("parent").addEventListener("click",function(e){
  alert("parent事件被触发，"+this.id);
  })
  document.getElementById("child").addEventListener("click",function(e){
  alert("child事件被触发，"+this.id)
  })

결과:

자식 이벤트가 트리거되고, child
부모 이벤트가 트리거되고, parent

결론: 첫 번째 자식, 그다음 부모입니다. 이벤트가 안쪽에서 바깥쪽으로 순서대로 발생하는 것을 이벤트 버블링이라고 합니다.

이제 세 번째 매개변수의 값을 true로 변경합니다

　　 document.getElementById("parent").addEventListener("click",function(e){
  alert("parent事件被触发，"+e.target.id);
  },true)
  document.getElementById("child").addEventListener("click",function(e){
  alert("child事件被触发，"+e.target.id)
  },true)

결과:

부모 이벤트가 발생하고, parent
child 이벤트가 발생하고, child

결론: 먼저 부모, 그 다음 자식입니다. 이벤트가 발생하는 순서가 외부에서 내부로 바뀌는 것이 이벤트 캡쳐입니다.

이벤트 버블링을 사용하는 마지막 경우는 쓸데없는 것 같지만 암튼 자주 사용합니다.

　　<ul>
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
  <li>item4</li>
  <li>item5</li>
  <li>item6</li>
 </ul>

요구 사항은 다음과 같습니다. 마우스를 li 위에 놓으면 해당 li의 배경이 회색으로 변합니다.

이벤트 버블링을 사용하여 달성:

　　$("ul").on("mouseover",function(e){
   $(e.target).css("background-color","#ddd").siblings().css("background-color","white");
  })

어떤 사람들은 이벤트를 모든 리에 직접 연결할 수 있다고 말할 수도 있습니다. 한 가지만 하면...

　　　$("li").on("mouseover",function(){
   $(this).css("background-color","#ddd").siblings().css("background-color","white");
  })

예, 괜찮습니다. 그리고 코드 단순성 측면에서 둘은 유사합니다. 그러나 전자는 모든 li 노드를 순회하는 데 한 번 더 적은 작업이 필요하므로 성능 측면에서는 확실히 더 좋습니다.
그리고 바인딩 이벤트가 완료된 후 페이지에 일부 요소를 동적으로 로드하면...

$("25edfb22a4f469ecb59f1190150159c6item7bed06894275b65c1ab86501b08a632eb").appendTo("ul");
이때 두 번째 옵션은 이벤트 바인딩 시 item7이 존재하지 않으므로 효과를 위해 , 다른 이벤트를 여기에 바인딩해야 합니다. 그리고 버블링 방식의 사용은 UL과 관련된 사건이기 때문에...
판사가 판단할 것입니다!

위 내용은 제가 여러분을 위해 정리한 내용입니다. 앞으로 도움이 되길 바랍니다.

JS 이벤트 버블링 및 이벤트 캡처(그래픽 튜토리얼, 간단한 폭력)

관련 기사