Javascript事件（事件)的传播与冒泡

特性说明和原理图：

标准浏览器和Ie9浏览器都支持事件的冒泡和捕获，而IE8-浏览器只支持冒泡标准和Ie9浏览器用停止传播()或cancelBubble阻止事件传播，而ie8-用e.cancelBubble属性来阻冒泡，注意ie9不支持cancelBubble属性（设置后不生效),但chrome、safari、opera、firefox都支持cancelBubble属性Ie8-用attachEvent为数字正射影像图元素添加一个事件，但必须在事件名前加上打开，此类事件只能在元素的冒泡阶段stopPropagatin()方法用于阻止事件的传播，如果设置在捕获阶段，则目标和冒泡阶段不会被执行；cancelBubble属性只能阻止冒泡阶段，对捕获和目标阶段的事件不能阻止preventDefault()和window.event.returnValue用于标准浏览器和ie9，都可以阻止默认事件ie8-可以用返回值，preventDefault()。示例代码(ie8-示例不提供)

超文本标记语言代码

body class=' body ' div class=' log '/div input type=' text ' id=' inTxt ' name=' inTxt '/div class=' wrap ' div class=' cont ' button type=' button ' class=' button ' id=' BTN '按钮/button select name=' stop type ' id=' stop type '选项值=' 1 '停止传播/选项值=' 2 '取消按钮/选项/选择按钮类型=' button ' class=' button ' id=' btnReject ' cont阻止捕获或冒泡/按钮/div/正文层级关系：包身按钮，可以对照上面的原理

射流研究…代码

$(function(){ var $log=$(').log ')，$wrap=$(' .换行)，$cont=$(' .cont ')，$ BTN=文档。getelementbyid(' BTN ')，$stopType=$('#stopType ')，$body=$('body ')，$inTxt=$('#inTxt ')，$ btnReject=$(' # btnReject ')；var ePhase=[' '，'捕获','目标','冒泡]var setBorderColor=function($ DOM，Color，time，event){ $ DOM=$($ DOM)；$ log。html($ log。html()$ DOM。attr(' class ')'[' ePhase[event。事件阶段]']' ' ' br/')var时间索引=window。settimeout(函数(){ $ DOM。CSS({ '边框颜色' :颜色，'边框宽度' : ' 4px ' })；},时间);} //捕获$body[0].addEventListener('click ')，函数(event){ $ log。html($ log。html()'-br ')；setBorderColor($body，' #0866ff '，0，事件);},真);$wrap[0].addEventListener('click '，function(event){ setBorderColor($ wrap，' yellow '，2000，event)；},真);$cont[0].addEventListener('click ')，函数(event){ event=event | | window。事件；if($ stoptype。val()==' 1 '){事件。stopperpagation()；} else { event . cancelubble=true } setBorderColor($ cont，' green '，1000，event)；},真);$btn.addEventListener('click '，function(event){ setBorderColor($ BTN，' red '，0，event)；},真);$btnReject[0].addEventListener('click '，function(event){ setBorderColor($ btnReject，' gray '，0，event)；},真);//冒泡$body[0].addEventListener('click '，function(event){ setBorderColor($ body)，#0866ff '，0，event)；}，false)；$wrap[0].addEventListener('click '，function(event){ setBorderColor($ wrap，' yellow '，2000，event)；}，false)；$cont[0].addEventListener('click '，function(event){ setBorderColor($ cont，' green '，1000，event)；}，false)；$btn.addEventListener('click '，function(event){ setBorderColor($ BTN，' red '，0，event)；}，false)；$btnReject[0].addEventListener('click '，function(event){ setBorderColor($ btnReject，' gray '，0，event)；}，false)；//阻止默认事件$inTxt.keypress(函数（事件){//事件。prevent default()；窗户。事件。返回值=false$尸体。追加(字符串。FromCharCode(事件。key code))；});});实现一个完整的事件流的演示在连续的的捕获事件处有阻止事件传播的代码阻止默认事件只用于验证效果图

应用场景

事件在捕获阶段的应用场景很少，一般应用在目标阶段和冒泡阶段。目前，w3c标准事件已得到普遍支持。如果与ie8- browser不兼容，可以丢弃一些兼容代码。以上就是本文的全部内容。希望本文的内容能给大家的学习或工作带来一些帮助，也希望多多支持我们！