事件冒泡和事件捕获解析使用js

一、页面常常有事件点击的场景，这里有两种情况分辨 事件冒泡和事件捕获

浏览器上最外层是window对象

1.事件捕获

 ---> 它是从最外层开始发生到最具体的元素 p

document ->html ->body ->div ->p

 

 

2.事件冒泡是从结构内层最里面元素发生到最外层document对象 最内层向上到document对象上

p ->div ->body ->html ->document

统一标准 ---先捕获再冒泡

addEventListener 第三个参数视为 冒泡和捕获准备 ，默认false为冒泡，true为事件捕获事件函数调用

阻止事件捕获 和阻止冒泡 监听第三个参数为true e.stopImmediatePropagetion();

 

 

二、那么stopImmediatePropagation()和stopPropagation() =>阻止冒泡使用 的区别在哪里

后者阻止是只会阻止冒泡或者是捕获。但是前者除此之外还会阻止该元素的其他事件发生

但是后者就不会阻止其他事件的发生

三、兼容解决 event获取兼容写法及阻止冒泡和默认事件

1.阻止冒泡事件兼容写法

function stopBubble(){
  var e= window.event || arguments.callee.caller.arguments[0]
  if(e && e.stopPropagation){
  //其他浏览器
  e.stopPropagation();
}else{
  //IE浏览器
  e.cancelBubble = true;
}
}

2.阻止默认事件兼容写法

function stopEvent(){
  var e= window.event || arguments.callee.caller.arguments[0];
  if(e && e.preventDefault){
  //其他浏览器
  e.preventDefault();
}else{
  //IE浏览器
  e.returnValue=false;
}
}

//这种用点 是网页有默认行为动作，提交行为刷新网页，网页滚动鼠标滚轮，网页滚动条会动 
//阻止事件默认行为 不需要时 直接将这些事件阻止掉

内层阻止事件

function a(e){
  e=e || window.event;
 alert(e.keyCode);
}

3.javascript中事件几种兼容性写法

//1.获取事件
e = e || window.event
//2.获取事件目标
e.target || e.srcElement
//3.键盘事件
event.keyCode || event.which
//4.阻止事件冒泡
e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true