Jquery中文网 www.jquerycn.cn
Jquery中文网 >  jQuery  >  jquery 教程  >  正文 jQuery事件流的顺序

jQuery事件流的顺序

发布时间:2016-09-17   编辑:www.jquerycn.cn
jquery中文网为您提供jQuery事件流的顺序等资源,欢迎您收藏本站,我们将为您提供最新的jQuery事件流的顺序资源
<div id="aaron">    <div id='test'>         <ul>             <p>点击p被委托,ul被阻止了,因为内部重写了事件对象</p>         </ul>    </div> </div>v>

测试代码

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

触发的的结果:

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

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

可以看到

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

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

您可能感兴趣的文章:
jquery $.ajax各个事件执行顺序
由点击页面其它地方隐藏div所想到的jQuery的delegate
如何确保JavaScript的执行顺序 之jQuery.html深度分析
jQuery字母顺序导航插件 ListNav
Jquery瀑布流插件使用介绍
cookie.js 加载顺序问题怎么才有效
javascript事件流基础
jQuery链式操作如何实现以及为什么要用链式操作
jquery 事件执行检测代码
jquery ready(fn)事件使用介绍

|ԌE|ԌntBottomAd">
上一篇:jQuery插件教程 下一篇:jQuery动画的实现
[关闭]
最近更新
浏览排行