这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了 JavaScript 中捕获与阻止捕获、冒泡与阻止冒泡详解及实例的相关资料, 需要的朋友可以参考下
JavaScript 中捕获 / 阻止捕获、冒泡 / 阻止冒泡
事件流描述的是从页面中接收事件的顺序。提出事件流概念的正是 IE 和 Netscape,但是前者提出的是我们常用的事件冒泡流,而后者提出的是事件捕获流。
第一部分:事件冒泡
即事件开始由最具体的元素接收,然后逐级向上传播到较为不具体的节点(文档)。
下面举一个简单的例子:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>bubble</title>
- <style>
- button{
- background: red;
- color:white;
- }
- #third{
- width: 50px;
- height: 50px;
- border:thin solid red;
- }
- #second{
- width: 100px;
- height: 100px;
- border:thin solid red;
- }
- #first{
- width:200px;
- height: 200px;
- border:thin solid red;
- }
- </style>
- </head>
- <body>
- <div id="first">
- <div id="second" >
- <div id="third" >
- <button id="button">事件冒泡</button>
- </div>
- </div>
- </div>
- <script>
- document.getElementById("button").addEventListener("click",function(){
- alert("button");
- },false);
- document.getElementById("third").addEventListener("click",function(){
- alert("third");
- },false);
- document.getElementById("second").addEventListener("click",function(){
- alert("second");
- },false);
- document.getElementById("first").addEventListener("click",function(){
- alert("first");
- },false);
- </script>
- </body>
- </html>
这时,我们只点击 button 元素,效果如下:
可以看到,虽然我们只点击了 button 元素,但是,button 外的 third、second、first 上的事件由内向外以此被触发,触发的顺序是由 DOM 树的下层到 DOM 树的最上面,故称为冒泡。
(说明:尽管这里我使用了 DOM2 级事件处理程序,并设置每个事件为冒泡阶段发生,但是即使使用 DOM0 级,得到的结果也是这样的,冒泡是默认的)
但是如果我们不希望事件冒泡呢?那么如何阻止事件冒泡?
实际上,事件的对象有一个 stopPropagation() 方法可以阻止事件冒泡,我们只需要把上个例子中 button 的事件处理程序修改如下:
- document.getElementById("button").addEventListener("click",
- function(event) {
- alert("button");
- event.stopPropagation();
- },
- false);
这样,点击 button 后,只会弹出一个弹窗,显示 button。
注意:现代所有的浏览器都支持事件冒泡,只是在实现上有一些差别。
第二部分:事件捕获
事件捕获和事件冒泡是刚好相反的,事件捕获是指不太具体的节点应该更早的接收到事件,而最具体的节点应该最后接收到事件。举例如下所示:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>bubble</title>
- <style>
- button{
- background: red;
- color:white;
- }
- #third{
- width: 50px;
- height: 50px;
- border:thin solid red;
- }
- #second{
- width: 100px;
- height: 100px;
- border:thin solid red;
- }
- #first{
- width:200px;
- height: 200px;
- border:thin solid red;
- }
- </style>
- </head>
- <body>
- <div id="first">
- <div id="second" >
- <div id="third" >
- <button id="button">事件冒泡</button>
- </div>
- </div>
- </div>
- <script>
- document.getElementById("button").addEventListener("click",function(){
- alert("button");
- },true);
- document.getElementById("third").addEventListener("click",function(){
- alert("third");
- },true);
- document.getElementById("second").addEventListener("click",function(){
- alert("second");
- },true);
- document.getElementById("first").addEventListener("click",function(){
- alert("first");
- },true);
- </script>
- </body>
- </html>
大家可以看到这个例子我只是把 addEventListener() 方法的第三个参数由前面例子的 false 修改为了 true, 也就是使用捕获方式获得 button,那么结果如下:
我们可以看到最外层的事件先被触发,最后才是我们点击的 button 事件被触发,这便是事件捕获。
那么我们如何才能阻止事件的捕获呢?使用 event.stopPropagation() 方法吗?答案是否定的,这里要知道,stopPropagation() 方法只能阻止事件的冒泡,而不能阻止事件捕获。
但是我们可以使用 DOM3 级新增事件 stopImmediatePropagation() 方法来阻止事件捕获,另外此方法还可以阻止事件冒泡。应用如下:
- document.getElementById("second").addEventListener("click",
- function() {
- alert("second");
- event.stopImmediatePropagation();
- },
- true);
这样,就可以在 id 为 second 处阻止事件的捕获了。
注意:尽管这是 Netscape Navigator 提出的事件流,但是现在所有的浏览器都支持这种事件流模型。但是由于老的浏览器不支持,所以很少有人使用事件捕获。
第三部分:DOM 事件流
DOM2 级事件规定的时间流包括 三个阶段:
注意:在 DOM 事件流中,实际的目标在捕获阶段不会接收到事件,下一个阶段是处于目标阶段,这时事件被触发,最后进入事件冒泡阶段。我们认为处于目标阶段是事件冒泡阶段的一部分。
来源: http://www.phperz.com/article/17/0701/328068.html