详解jQuery事件流的顺序

零下一度
Lepaskan: 2017-06-17 17:38:34
asal
1349 orang telah melayarinya

为您提供jQuery事件流的顺序等资源,欢迎您收藏本站,我们将为您提供最新的jQuery事件流的顺序资源

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

测试代码

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;) })
Salin selepas log masuk

触发的的结果:

test 委托到p触发 被阻止了 mousedown body
Salin selepas log masuk

根据W3C的事件流,捕获到目标到冒泡

可以看到

p,ul节点虽然比#test p节点更早接触到target但是由于p,ul是绑定在#aaron p上的冒泡,所以优先级要低于#test

但是同一个元素的优先级,就要根据元素的嵌套顺序了。反正一句话离目标taget越近的越早触发

Atas ialah kandungan terperinci 详解jQuery事件流的顺序. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan