<>强特性说明和原理图:
<李>标准浏览器和Ie9 +浏览器都支持事件的冒泡和捕获,而IE8——浏览器只支持冒泡李
<李>标准和Ie9 +浏览器用stopPropagation()或cancelBubble阻止事件传播,而ie8——用e.cancelBubble属性来阻冒泡,注意Ie9不支持cancelBubble属性(设置后不生效),但chrome, firefox safari,歌剧,都支持cancelBubble属性。
<李> Ie8——用attachEvent为dom元素添加一个事件,但必须在事件名前加上,此类事件只能在元素的冒泡阶段。
<李> stopPropagatin()方法用于阻止事件的传播,如果设置在捕获阶段,则目标和冒泡阶段不会被执行;李
<李> cancelBubble属性只能阻止冒泡阶段,对捕获和目标阶段的事件不能阻止李
<李> preventDefault()和window.event.returnValue用于标准浏览器和ie9 +,都可以阻止默认事件.ie8——可以用returnValue, preventDefault()。
<强>示例代码(ie8 -示例不提供)
<强> html代码
& lt;身体类=吧硖濉北?
& lt; div类="日志"祝辞& lt;/div>
& lt;输入类型="文本" id=" inTxt " name=" inTxt "/比;
& lt; div类="包装"比;
& lt; div类=白狻北?
& lt;按钮类型=鞍磁ァ崩?"按钮" id=癰tn祝辞按钮& lt;/button>
& lt;选择name=" stopType " id=皊topType”比;
& lt;选项值=" https://www.yisu.com/zixun/1 "祝辞StopPropagation
& lt;选项值=" https://www.yisu.com/zixun/2 "祝辞cancelBubble
& lt;/select>
& lt;按钮类型=鞍磁ァ崩?"按钮" id=癰tnReject祝辞cont阻止捕获或冒泡& lt;/button>
& lt;/div>
& lt;/div>
& lt;/body>
层级关系:身体→包装→cont→按钮,可以对照上面的原理
<强> Js代码
$(函数(){
日志=$ var $ (' . log '),
用美元=$ (' .wrap '),
美元续=$ (' .cont '),
$ btn=. getelementbyid (btn),
美元stopType=$ (' # stopType '),
身体=美元(身体的),
美元inTxt=$ (' # inTxt '),
美元btnReject=$ (' # btnReject ');
var ePhase=["”、“捕获”,“目标”、“冒”泡)
var setBorderColor=function (dom美元、颜色、时间、事件){
(dom=$美元dom);
(log.html美元log.html () + $ dom.attr(类的)+ ' (' + ePhase(事件。eventPhase) + '] ' + ' & lt; br/祝辞')
var timeIndex=window.setTimeout(函数(){
美元dom.css ({
“borderColor”:颜色,
“borderWidth”:“4 px”
}）;
},时间);
｝//捕获
身体美元[0].addEventListener(“点击”,函数(事件){
(log.html美元log.html () +”- - - - - - - - - - - - - - - - - - & lt; br>”);
setBorderColor($身体,# 0866 ff, 0,事件);
},真正的);
用美元[0].addEventListener(“点击”,函数(事件){
setBorderColor(用美元,“黄色”,2000年,事件);
},真正的);
美元续[0].addEventListener(“点击”,函数(事件){
事件=事件| | window.event;
如果(stopType.val美元()==' 1 '){
event.stopPropagation ();
其他}{
事件。cancelBubble=true;
｝
setBorderColor (cont美元,“绿色”,1000年,事件);
},真正的);
btn美元。addEventListener(“点击”,函数(事件){
setBorderColor (btn美元,“红”,0,);
},真正的);
美元btnReject [0] .addEventListener(“点击”,函数(事件){
setBorderColor (btnReject美元,“灰色”,0,);
},真正的);//冒泡
身体美元[0].addEventListener(“点击”,函数(事件){
setBorderColor($身体,# 0866 ff, 0,事件);
},假);
用美元[0].addEventListener(“点击”,函数(事件){
setBorderColor(用美元,“黄色”,2000年,事件);
},假);
美元续[0].addEventListener(“点击”,函数(事件){
setBorderColor (cont美元,“绿色”,1000年,事件);
},假);
btn美元。addEventListener(“点击”,函数(事件){
setBorderColor (btn美元,“红”,0,);
},假);
美元btnReject [0] .addEventListener(“点击”,函数(事件){
setBorderColor (btnReject美元,“灰色”,0,);
},假);//阻止默认事件
inTxt.keypress美元(函数(事件){//event.preventDefault ();
window.event。returnValue=https://www.yisu.com/zixun/false;
美元的身体。追加(String.fromCharCode(事件。键码);
}）;
}）;
之前
