JS冒泡事件 与 事件捕获
JS冒泡事件 与 事件捕获
案例
<!DOCTYPE html>
<html>
<head>
<title>冒泡事件</title>
<script type="text/javascript">
window.onload = function(){
window.onclick = function(){
alert("Window"); // 顶级
};
document.onclick = function(){
alert("Document"); // 次顶级
};
document.documentElement.onclick = function(){
alert("Html"); // 次次顶级
};
document.body.onclick = function(){
alert("Body"); // 次次次顶级
};
document.getElementById("myDiv").onclick = function(){
alert("Div"); // 最先执行，并且会传递到上一层。点击两次，则按顺序执行两次。如果上级也有点击事件的话
};
}
</script>
</head>
<body>
<div id="myDiv">点我</div>
</body>
</html>
小结
1.点击myDiv。依次是Div-Body-Html-Document-Window
2.点击其他空白地方。依次是Html-Document-Window
3.连续点击两次，会按顺序执行两次
4.冒泡的前提是，父级也定义了相应的事件
再看一个更复杂的例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>事件捕捉</title>
<script type="text/javascript">
window.onload = function(){
window.addEventListener("click", function(){
alert("Window - true");
}, true); // true - 事件句柄在捕获阶段执行 ,false- false- 默认。事件句柄在冒泡阶段执行
document.addEventListener("click", function(){
alert("Document - true");
}, true);
document.documentElement.addEventListener("click", function(){
alert("Html - true");
}, true);
document.body.addEventListener("click", function(){
alert("Body - true");
}, true);
document.getElementById("myDiv").addEventListener("click", function(){
alert("Div - true");
}, true);
window.addEventListener("click", function(){
alert("Window - false");
}, false); // true - 事件句柄在捕获阶段执行 ,false- false- 默认。事件句柄在冒泡阶段执行
document.addEventListener("click", function(){
alert("Document - false");
}, false);
document.documentElement.addEventListener("click", function(){
alert("Html - false");
}, false);
document.body.addEventListener("click", function(){
alert("Body - false");
}, false);
document.getElementById("myDiv").addEventListener("click", function(){
alert("Div - false");
}, false);
window.onclick = function(){
alert("Window - click"); // 顶级
};
document.onclick = function(){
alert("Document - click"); // 次顶级
};
document.documentElement.onclick = function(){
alert("Html - click"); // 次次顶级
};
document.body.onclick = function(){
alert("Body - click"); // 次次次顶级
};
document.getElementById("myDiv").onclick = function(){
alert("Div - click"); // 最先执行，并且会传递到上一层。点击两次，则按顺序执行两次。如果上级也有点击事件的话
};
}
</script>
</head>
<body>
<div id="myDiv">点我</div>
</body>
</html>
小结
1.点击的执行结果是
Window - true
Document - true
Html - true
Body - true
Div - true
Div - false
Div - click
Body - false
Body - click
Html - false
Html - click
Document - false
Document - click
Window - false
Window - click
2.顺序与js代码顺序无关
3.就算没有定义点击事件，一样可以捕获点击事件，只要点击到，就能捕获到
再次改造，阻止冒泡
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>事件捕捉</title>
<script type="text/javascript">
window.onload = function(){
document.addEventListener("click", function(){
alert("Document - true");
}, true);
window.addEventListener("click", function(){
alert("Window - true");
}, true); // true - 事件句柄在捕获阶段执行 ,false- false- 默认。事件句柄在冒泡阶段执行
document.documentElement.addEventListener("click", function(){
alert("Html - true");
}, true);
document.body.addEventListener("click", function(){
alert("Body - true");
}, true);
document.getElementById("myDiv").addEventListener("click", function(){
alert("Div - true");
}, true);
window.addEventListener("click", function(){
alert("Window - false");
}, false); // true - 事件句柄在捕获阶段执行 ,false- false- 默认。事件句柄在冒泡阶段执行
document.addEventListener("click", function(){
alert("Document - false");
}, false);
document.documentElement.addEventListener("click", function(){
alert("Html - false");
}, false);
document.body.addEventListener("click", function(){
alert("Body - false");
}, false);
document.getElementById("myDiv").addEventListener("click", function(){
alert("Div - false");
}, false);
window.onclick = function(){
alert("Window - click"); // 顶级
};
document.onclick = function(){
alert("Document - click"); // 次顶级
};
document.documentElement.onclick = function(){
alert("Html - click"); // 次次顶级
};
document.body.onclick = function(){
alert("Body - click"); // 次次次顶级
};
document.getElementById("myDiv").onclick = function(){
alert("Div - click"); // 最先执行，并且会传递到上一层。点击两次，则按顺序执行两次。如果上级也有点击事件的话
event.stopPropagation(); // 阻止冒泡
};
}
</script>
</head>
<body>
<div id="myDiv">点我</div>
</body>
</html>
小结
Window - true
Document - true
Html - true
Body - true
Div - true
Div - false
Div - click
终止了，没有后续的内容了
JS冒泡事件 与 事件捕获的更多相关文章
- 浅谈js冒泡事件2
js冒泡阻止 1. 事件目标 现在,事件处理程序中的变量event保存着事件对象.而event.target属性保存着发生事件的目标元素.这个属性是DOM API中规定的,但是没有被所有浏览器实现 . ...
- [JS]笔记12之事件机制--事件冒泡和捕获--事件监听--阻止事件传播
-->事件冒泡和捕获-->事件监听-->阻止事件传播 一.事件冒泡和捕获 1.概念:当给子元素和父元素定义了相同的事件,比如都定义了onclick事件,点击子元素时,父元素的oncl ...
- js事件机制——事件冒泡和捕获
概念:当给子元素和父元素定义了相同的事件,比如都定义了onclick事件,点击子元素时,父元素的onclick事件也会被触发.js里称这种事件连续发生的机制为事件冒泡或者事件捕获. IE浏览器:事件从 ...
- JS事件（事件冒泡和事件捕获）
事件流:描述的是在页面中接收事件的顺序 事件冒泡:由最具体的元素接收,然后逐级向上传播至最不具体的元素的节点(文档) 事件捕获:最不具体的节点先接收事件,而最具体的节点应该是最后接收事件 DOM中:用 ...
- Js冒泡事件和捕获事件
js中冒泡事件和捕获事件: 冒泡事件:冒泡事件是从里向外,即是从被绑定元素开始一直向外到达页面的所有祖先元素都会被触发,这 一过程被称为事件冒泡.这个事件从原始元素开始一直冒泡到DOM树的最上层 捕获 ...
- 理解js事件冒泡事件委托事件捕获
js事件冒泡 javascript的事件传播过程中,当事件在一个元素上出发之后,事件会逐级传播给先辈元素,直到document为止,有的浏览器可能到window为止,这就是事件冒泡现象. <di ...
- [JS学习笔记]Javascript事件阶段：捕获、目标、冒泡
当你在浏览器上点击一个按钮时,点击的事件不仅仅发生在按钮上,同时点击的还有这个按钮的容器元素,甚至也点击了整个页面. 事件流 事件流描述了从页面接收事件的顺序,但在浏览器发展到第四代时,浏览器开发团队 ...
- Atitit. Js 冒泡事件阻止 事件捕获 事件传递 事件代理
Atitit. Js 冒泡事件阻止 事件捕获 事件传递 事件代理 1. 事件冒泡1 2. 事件捕获1 3. 同时支持了事件捕获阶段和事件冒泡阶段ddEventListener的第三个参数1 ...
- JS中的事件、事件冒泡和事件捕获、事件委托
https://www.cnblogs.com/diver-blogs/p/5649270.html https://www.cnblogs.com/Chen-XiaoJun/p/6210987.ht ...
随机推荐
- SOA概念具体解释
1.概述 1.1基本定义 SOA(Service-Oriented Architecture)既面向服务的体系结构,是一个组件模型.它将应用程序猿的不同功能可是(称为服务)通过定义良好的接口联系起来. ...
- 2015.05.11,外语,读书笔记-《Word Power Made Easy》 15 “如何谈论事情进展” SESSION 44
1. not the real McCoy simulate(['simjuleit] v. 假装,冒充,模仿,模拟)来自拉丁simulo,copy的意思.simulo本身派生自拉丁形容词simili ...
- UVA 10127- Ones 数学
Given any integer 0 ≤ n ≤ 10000 not divisibleby 2 or 5, some multiple of n is a number whichin decim ...
- Core Bluetooth的基本常识
每个蓝牙4.0设备都是通过服务(Service)和特征(Characteristic)来展示自己的 一个设备必然包含一个或多个服务,每个服务下面又包含若干个特征 特征是与外界交互的最小单位 比如说,一 ...
- ROS-Gazebo文件标签解读
前言:Gazebo是一个三维机器人仿真器,它是独立的软件,支持ROS. 标签 功能 <gazebo> 设置Gazebo仿真的参数 <mu1>, <mu2> 设置摩擦 ...
- synchronized同步机制，修饰类和修饰对象的区别
synchronized用法 synchronized修饰的对象有几种: 修饰一个类:其作用的范围是synchronized后面括号括起来的部分,作用的对象是这个类的所有对象: 修饰一个方法:被修饰的 ...
- git提交不用每次都输入用户名密码
克隆项目二种方式: 1. 使用https url克隆, 复制https url 然后到 git clone https-url 2.使用 SSH url 克隆却需要在克隆之前先配置和添加好 SSH ...
- React实现单例组件
问题背景 在工作中遇到了这样一个场景,写了个通用的弹窗组件,却在同一个页面中多次使用了该组件.当点击打开弹窗时,可想而知,一次性打开了多个弹窗,而业务需求只需要打开一个. 我个人在解决问题过程中的一些 ...
- Linux常见后缀缩写含义
ctl: control rc: run control (A run-control file is a file of declarations or commands associated wi ...
- 发现个很变态的css问题，记录下。
注意看Ul:nth-child(){} 本来是一一对应的,因为后来改版在div中加了<h1></h1>标记后,竟然自动后移了.... 不可思议,莫明奇妙