冒泡、捕获、阻止默认事件
程序员文章站
2022-05-13 16:02:31
...
Ele.addEventListener(type,fn,false); false为冒泡 true为捕获
在同一个ele上可以绑定相同type事件,可以一个为冒泡一个为捕获。
会先执行捕获事件
- 事件冒泡:
从代码结构上(非视觉上)嵌套关系的元素,会存在冒泡功能。
点击子元素,会从子元素依次往父元素,触发事件。
- 事件捕获:
代码结构上(非视觉上)嵌套关系的元素,会存在捕获功能。
点击子元素,会自父元素捕获至子元素(该事件源元素)
触发顺序 先捕获 后冒泡
focus、blur、change、submit、reset、select等事件没有冒泡功能
取消冒泡与阻止默认事件
- 取消冒泡
·标准:event.stopPropagation();
·ie:event.cancelBubble=true;
- 阻止默认事件
阻止默认事件 方法
1. return false; 以对象属性的方式注册的事件才生效
2.event.preventDefault() w3c标准 ie9下不兼容
3.event.returnValue = false; 兼容ie
表单提交、a标签跳转、右键菜单等
// 阻止默认事件 方法
// 1. return false; 以对象属性的方式注册的事件才生效
// 2.event.preventDefault() w3c标准 ie9下不兼容
// 3.event.returnValue = false; 兼容ie
// 表单提交、a标签跳转、右键菜单等
// 阻止右键菜单
document.oncontextmenu = function(e){
console.log(1);
// return false;
// e.preventDefault();
// e.returnValue = false;
}
// 封装阻止默认事件
function stopEvent(e){
if (e.preventDefault) {
e.preventDefault();
}else{
e.returnValue = false;
}
}