JS中 事件冒泡与事件捕获
来源:互联网 发布:我的世界java安装失败 编辑:程序博客网 时间:2024/05/16 00:44
【JS中的事件流】
1、事件冒泡:当某DOm元素触发一种事件时,会从当前节点开始,逐级往上触发其祖先节点的同类型事件,直到DOM根节点;
>>>什么情况下会产生事件冒泡
① DOM0模型绑定事件,全部都是冒泡
② IE8之前,使用attachEvent()绑定事件、全部都是冒泡
③ 其他浏览器,使用addEventLinstener()添加事件,当第三个参数省略或者为false时,为事件冒泡
2、事件捕获:当其DOM元素触发一种事件时,会从文档根节点开始,逐级向下触发其祖先节点的同类型事件,直到该节点自身。
>>>什么情况下触发事件捕获:
① 使用addEventListener添加事件,当第三个参数省略或者为true时,为事件捕获。
3、阻止事件冒泡
在IE浏览器中,使用 e.cancelBubble = true;
在其他浏览器中,使用 e.stopPropagation();
兼容所有浏览器的写法:
function myParagraphEventHandler(e) {
e = e || window.event;
if (e.stopPropagation) {
e.stopPropagation(); //IE以外
} else {
e.cancelBubble = true; //IE
}
}
4、取消事件默认行为
在IE浏览器中,使用 e.returnValue = false;
在其他浏览器中,使用 e.preventDefault();
兼容所有浏览器的写法:
function eventHandler(e) {
e = e || window.event;
// 防止默认行为
if (e.preventDefault) {
e.preventDefault(); //IE以外
} else {
e.returnValue = false; //IE
}
}
div1.addEventListener("click",function(e){
e.stopPropagation();*///不考虑老版本IE,可以使用这一句话
console.log("div1触发事件");
},false);
div2.addEventListener("click",function(){
myParagraphEventHandler();*/// 考虑老版本IE兼容性,可以封装一个函数调用
console.log("div2触发事件");
},false);
div3.addEventListener("click",function(){
myParagraphEventHandler();
console.log("div3触发事件");
},false);
// 阻止事件冒泡
function myParagraphEventHandler(e) {
e = e || window.event;
if (e.stopPropagation) {
e.stopPropagation(); //IE以外
} else {
e.cancelBubble = true; //IE
}
}
function eventHandler(e) {
e = e || window.event;
// 防止默认行为
if (e.preventDefault) {
e.preventDefault(); //IE以外
} else {
e.returnValue = false; //IE
}
}
- JS中 事件冒泡与事件捕获
- JS中 事件冒泡与事件捕获
- JS事件捕获与冒泡
- js事件冒泡与捕获
- JS事件捕获与冒泡
- 【js】事件冒泡与事件捕获
- js之事件捕获与事件冒泡
- js中的事件捕获与事件冒泡
- js中的事件冒泡与事件捕获
- JS 事件捕获与事件冒泡
- JS事件捕获与事件冒泡
- js中事件捕获和事件冒泡
- js冒泡、捕获事件
- 【JS】事件冒泡&事件捕获
- JS 中的事件冒泡与捕获
- 事件捕获与冒泡
- 事件冒泡与事件捕获
- 事件捕获与事件冒泡
- c++ primer-第二章 变量和基本类型
- JAVA实现一次性中文验证码
- 大家生活中有用到网线的都来看看
- 光模块是怎么炼成的?
- 原装光模块vs第三方兼容光模块,哪个更好?
- JS中 事件冒泡与事件捕获
- 你知道为什么原装光模块价格这么贵吗?
- 光纤收发器的演变过程
- CSS3 产生动画效果的属性
- 欧洲光通讯展,Are you ready?
- 如何站在不同角度看待100G光模块?
- 高温或低温会对光模块造成什么影响?
- 100g光模块的市场调研,成本居高难下!
- linux ` ` 与 $()的用法