>  기사  >  웹 프론트엔드  >  jQuery 이벤트 흐름의 순서에 대한 자세한 설명

jQuery 이벤트 흐름의 순서에 대한 자세한 설명

零下一度
零下一度원래의
2017-06-17 17:38:341351검색

jQueryevent흐름 시퀀스 및 기타 리소스를 제공하세요. 이 사이트를 북마크에 추가하실 수 있습니다. 최신 jQuery 이벤트 흐름 시퀀스 리소스

<p id="aaron">    <p id=&#39;test&#39;>         <ul>             <p>点击p被委托,ul被阻止了,因为内部重写了事件对象</p>         </ul>    </p> </p>v>

테스트 코드를 제공하겠습니다.

var aaron = $("#aaron") //同一个元素上绑定不同的事件委托 aaron.on(&#39;mousedown&#39;,&#39;p&#39;,function(e){     console.log(&#39;委托到p触发&#39;)   // e.stopPropagation() }) aaron.on(&#39;mousedown&#39;,&#39;ul&#39;,function(e){     console.log(&#39;被阻止了&#39;) })  aaron.on(&#39;mousedown&#39;,function(e){   console.log(&#39;mousedown&#39;) })  $("#test").on(&#39;mousedown&#39;,function(){   console.log(&#39;test&#39;) })  $("body").on(&#39;mousedown&#39;,function(){   console.log(&#39;body&#39;) })

트리거 결과:

test 委托到p触发 被阻止了 mousedown body

W3C의 이벤트 흐름에 따르면 타겟이 캡쳐되어 버블링됩니다

p,ul 노드가 #test p 노드보다 먼저 타겟에 접촉하는 것을 볼 수 있지만 p,ul은 #aaron p에 바인딩되어 있기 때문입니다. 버블링되므로

우선순위 는 #test

보다 낮지만 동일한 요소의 우선순위는 요소의 중첩 순서를 기반으로 합니다. 아무튼 문장이 타겟에 가까울수록 더 빨리 발동됩니다

위 내용은 jQuery 이벤트 흐름의 순서에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.