JavaScript事件冒泡、事件捕获和阻止默认事件代码示例

来源：懂视网责编：小采时间：2020-11-27 20:24:05

JavaScript事件冒泡、事件捕获和阻止默认事件代码示例

JavaScript事件冒泡、事件捕获和阻止默认事件代码示例:谈起JavaScript的事件，事件冒泡、事件捕获、阻止默认事件这三个话题，无论是面试还是在平时的工作中，都很难避免。冒泡篇先来看一段实例：js:var $input = document.getElementsByTagName("input")[0]; var $p = d

推荐度：

点击下载本文 文档为doc格式

导读JavaScript事件冒泡、事件捕获和阻止默认事件代码示例:谈起JavaScript的事件，事件冒泡、事件捕获、阻止默认事件这三个话题，无论是面试还是在平时的工作中，都很难避免。冒泡篇先来看一段实例：js:var $input = document.getElementsByTagName("input")[0]; var $p = d

谈起JavaScript的事件，事件冒泡、事件捕获、阻止默认事件这三个话题，无论是面试还是在平时的工作中，都很难避免。

冒泡篇

先来看一段实例：

js:

var $input = document.getElementsByTagName("input")[0];
 var $p = document.getElementsByTagName("p")[0];
 var $body = document.getElementsByTagName("body")[0];

 $input.onclick = function(e){
 this.style.border = "5px solid red"
 var e = e || window.e;
 alert("red")
 }
 $p.onclick = function(e){
 this.style.border = "5px solid green"
 alert("green")
 }
 $body.onclick = function(e){
 this.style.border = "5px solid yellow"
 alert("yellow")
 }

html:

<p>
 <input type="button" value="测试事件冒泡" />
 </p>

依次弹出”red“,”green”,”yellow”。

你的本意是触发button这个元素，却连同父元素绑定的事件一同触发。这就是事件冒泡。

如果对input的事件绑定改为：

$input.onclick = function(e){
 this.style.border = "5px solid red"
 var e = e || window.e;
 alert("red")
 e.stopPropagation();
}

这个时候只会弹出”red“

因为阻止了事件冒泡。

捕获篇

既然有事件的冒泡，也可以有事件的捕获，这是一个相反的过程。区别是从顶层元素到目标元素或者从目标元素到顶层元素。

来看代码：

$input.addEventListener("click", function(){
 this.style.border = "5px solid red";
 alert("red")
}, true)
$p.addEventListener("click", function(){
 this.style.border = "5px solid green";
 alert("green")
}, true)
$body.addEventListener("click", function(){
 this.style.border = "5px solid yellow";
 alert("yellow")
}, true)

这个时候依次弹出”yellow“,”green”,”red”。

这就是事件的捕获。

如果把addEventListener方法的第三个参数改成false，则表示只在冒泡的阶段触发，弹出的依次为：”red“,”green”,”yellow”。

阻止默认事件篇

有一些html元素默认的行为，比如说a标签，点击后有跳转动作；form表单中的submit类型的input有一个默认提交跳转事件；reset类型的input有重置表单行为。

如果你想阻止这些浏览器默认行为，JavaScript为你提供了方法。

先上代码

var $a = document.getElementsByTagName("a")[0];
$a.onclick = function(e){
 alert("跳转动作被我阻止了")
 e.preventDefault();
 //return false;//也可以
}

<a href="http://www.nipic.com">昵图网</a>

默认事件没有了。

既然return false 和 e.preventDefault()都是一样的效果，那它们有区别吗？当然有。

仅仅是在HTML事件属性和 DOM0级事件处理方法中才能通过返回 return false 的形式组织事件宿主的默认行为。

注意：以上都是基于W3C标准，没有考虑到IE的不同实现。

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。TEL:177 7030 7066 E-MAIL:11247931@qq.com