Tag标签 | 收藏本站 | 设为首页 | 参考书籍 | web前端技术交流①群:WEB前端技术交流群 会员登录 | 会员注册

首页文字描述

会员投稿 RSS订阅 专注web前端: 要么读书、要么旅行,身体和精神必须要有一个在路上。【每天一小步,成功一大步】
搜索: 您的位置主页 > WEB前端 > Jquery/JS > js事件捕获、事件冒泡,剖析浏览器JS事件触发机制
隐藏/显示侧边栏

js事件捕获、事件冒泡,剖析浏览器JS事件触发机制

2015-01-08 23:44    来源:未知    责任编辑:admin    字号【
《Jquery基础教程》学习笔记:

事件捕获: 
    允许多个元素响应单击事件的一种策略叫做事件捕获。在事件捕获的过程中,事件首先会交给最外层的元素,接着再交给更具体的元素。 
事件冒泡: 
    与捕获事件相反,即当事件发生时,会首先发送给最具体的元素,在这个元素获得响应机会之后,事件会向上冒泡到更一般的元素。 
 
    不同的浏览器开发者们最初采用的是不同的事件传播模型。因而,最终出台的DOM标准规定应该同时使用这两种策略:首先,事件要从一般到具体进行捕获,然后事件再过冒泡返回DOM树的顶层。而事件处理程序可以注册到这个过程中的任何一部分。 
    并不是所有的浏览器都为了与新标准保持一致而进行了更新。而且,对于那些支持捕获的浏览器来说,通常必须明确启用才行。为了提供跨浏览器的一致性,jQuery始终在模型的冒泡阶段注册处理程序。因此,我们总是可以假定最具体的元素会首先获得响应事件的机会。

事件目标:纯javascript属性event.target 
    事件粗粒程序的变量event保存着事件对象。而event.target属性保存着发生事件的目标元素。这个属性DOM API中规定的,但是没有被所有浏览器实现。jQuery对这个事件对象进行了必要的扩展,从而在任何浏览器中都能够使用这个属性。通过.target,可以确定DOM中首先接收到事件的元素(即被实际单击的元素)。而且,我们知道this应用的是处理事件的DOM元素,所以可以编写下列代码: 
    $(document).ready(function(){ 
    $(‘#switcher’).click(function(event){ 
    if(event.target == this){ 
        $(‘#switcher .button’).toggleClass(‘hidden‘); 

}); 
}); 
此时的代码确保了被单击的元素是<div id=”switcher”>,而不是其它后代元素。 
 
XML DOM target 事件属性 
定义和用法 
target 事件属性可返回事件的目标节点(触发该事件的节点),如生成事件的元素、文档或窗口。 
语法 
event.target  

停止事件传播:纯javascript属性event. stopPropagation() 
Javascript 参考手册 
stopPropagation() 方法 
定义和用法 
不再派发事件。 
终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。调用该方法后,该节点上处理该事件的处理程序将被调用,事件不再被分派到其他节点。 
语法 
event.stopPropagation() 
说明 
该方法将停止事件的传播,阻止它被分派到其他 Document 节点。在事件传播的任何阶段都可以调用它。注意,虽然该方法不能阻止同一个 Document 节点上的其他事件句柄被调用,但是它可以阻止把事件分派到其他节点。

默认操作:event.preventDefault() 
定义和用法 
取消事件的默认动作。 
语法 
event.preventDefault() 
说明 
该方法将通知 Web 浏览器不要执行与事件关联的默认动作(如果存在这样的动作)。例如,如果 type 属性是 "submit",在事件传播的任意阶段可以调用任意的事件句柄,通过调用该方法,可以阻止提交表单。注意,如果 Event 对象的 cancelable 属性是 fasle,那么就没有默认动作,或者不能阻止默认动作。无论哪种情况,调用该方法都没有作用。  

*******事件委托:【使用内置的事件委托】可以解决事件冒泡、事件捕获的问题!

$('#switcher').on('click','button',function(){
                //事件相关操作
});
如果给.on()方法传入的ierge参数是一个选择符表达式,jQuery会把click事件处理程序绑定到#switcher对象,同时比较event.target和选择符(这里的'button')。如果匹配,jQuery会把this关键字映射到匹配的元素,否则不会执行事件处理程序。。。

更多
Tags 标签: js事件捕获 js事件冒泡
责任编辑:admin
设为首页 | 加入收藏 | 关于我们| 版权声明 | 在线留言 | 网站地图 |