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

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！