js事件冒泡和事件捕获的详细说明
(a)事件约束
1.普通事件绑定
向html中添加以on开头的特定属性(如onclick、onfocus);
按钮id=' a' onclick=' alert(这。id)'方法一/按钮
按钮id=' a' onclick=' handler (this)'模式2/按钮脚本函数handler (BTN) {alert (this。id);//undefined这指向窗口对象警报(BTN . id);//A }/scriptbutton id='A '模式3/button script varbtn=document . getelementbyid(' A ');BTN . onclick=function(){ alert(' 1: ' this . id);} BTN . onclick=function(){ alert(' 2: ' this . id);}//只能绑定一个事件处理程序,后者会覆盖前者;/script2。符合W3C标准的事件绑定(添加事件侦听器和删除事件侦听器)
target.addEventListener(类型,listener[,useCapture]);
Type:必选,代表监听事件类型的字符串;
当被监控的事件类型被触发时,Listener:必须接收事件通知对象;侦听器必须是实现事件侦听器接口或函数的对象;
UseCapture:可选,布尔值,默认值为false,表示事件传播模式为事件冒泡;True,表示事件传播模式是事件捕获;
(下面讨论事件捕获和事件冒泡)
这两个功能火狐和Chrome都支持,IE9及以后也支持这两个功能;IE使用attachEvent/disconnectevent来绑定和取消事件。
Button id='B'W3C标准1/button script varb TN=document . getelementbyid(' B ');btn.addEventListener('click ',处理程序,false);函数handler(){ alert(this . id);//B这指向一个dom对象;AttachEvent指向窗口对象}/scriptbutton id='B'W3C标准ii/button script varb TN=document . getelementbyid(' B ');btn.addEventListener('click ',处理程序,true);btn.addEventListener('click ',处理程序,false);函数handler(){ alert(this . id);//B} //当点击按钮时,函数处理程序将执行两次,一次用于事件捕获,一次用于事件冒泡;//如果绑定到同一个事件处理程序,且都是事件捕获或事件冒泡,则只能绑定一次;/script3。IE浏览器使用attachEvent/disconnectevent进行事件绑定和取消
button id=' C ' ie/button script var BTN=document . getelementbyid(' C ');btn.attachEvent('click ',处理程序);函数handler(){ alert(this . id);//未定义这指向窗口对象;AddEventListener指向dom对象}/script注意:同一个事件处理程序只能绑定一次;不同的功能对象可以重复绑定而不覆盖;匿名函数和匿名函数互不相同,即使它们的代码完全相同。
(2)事件捕获和事件冒泡
div id=' A ' div id=' B ' div id=' C '/div/div/div事件捕获:从最外层到目标对象依次触发(如上面的代码,如果点击C,其触发顺序为ABC)
事件冒泡:从目标对象到外层依次触发(如果点击C,其触发顺序为CBA)
DOM事件流:支持两种事件模型,捕获事件和冒泡事件,捕获事件先发生;两种事件流将触及DOM中的所有对象,从文档对象开始,到文档对象结束。
网络图片:
div id=' A ' style=' width :300 px;高度:300 px背景:红色;位置position : relative ' div id=' B ' style=' width :200 px;高度:200 px背景:绿色;位置:相对;top :50 px ' margin : auto ' div id=' C ' style=' width :100 px;高度:100 px背景:蓝色;位置:相对;top :50 px ' margin : auto '/div/div/div脚本var A=document。getelementbyid(' A ');var B=文档。getelementbyid(' B ');var C=文档。getelementbyid(' C ');//目标(目标阶段的处理函数,先注册先执行)C.addEventListener('click ',function(){ alert(' Ct ');},真);C.addEventListener('click ',function(){ alert(' Cf ');},false);//事件冒泡A.addEventListener('click ',function(){ alert(' Af ');},false);B.addEventListener('click ',function(){ alert(' Bf ');},false);//事件捕获A.addEventListener('click '),function(){ alert(' At ');},真);B.addEventListener('click ',function(){ alert(' Bt ');},真);/script/当点击C时(蓝色),输出At Bt Ct Cf Bf Af阻止事件的传播:
• 在W3c中,使用停止传播()方法
• 在工业管理学(工业工程)下设置cancelBubble=true
阻止事件的默认行为:
• 在W3c中,使用preventDefault()方法;
• 在工业管理学(工业工程)下设置窗户。事件。返回值=false
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持我们!
版权声明:js事件冒泡和事件捕获的详细说明是由宝哥软件园云端程序自动收集整理而来。如果本文侵犯了你的权益,请联系本站底部QQ或者邮箱删除。