Rumah > hujung hadapan web > tutorial js > 详解jQuery事件流的顺序

详解jQuery事件流的顺序

零下一度
Lepaskan: 2017-06-17 17:38:34
asal
1414 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!

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