js事件冒泡、事件捕获和阻止默认事件详解

谈起JavaScript的事件，事件冒泡、事件捕获、阻止默认事件这三个话题，无论是面试还是在平时的工作中，都很难避免。
1.事件冒泡
先来看一段代码：

var $input = document.getElementsByTagName（"input"）[0];var $div = document.getElementsByTagName（"div"）[0];var $body = document.getElementsByTagName（"body"）[0];$input.onclick = function（e）{ this.style.border = "5px solid red" var e = e || window.e; alert（"red"）} $div.onclick = function（e）{ this.style.border = "5px solid green" alert（"green"）}$body.onclick = function（e）{ this.style.border = "5px solid yellow" alert（"yellow"）}

html代码

<div> <input type="button" value="测试事件冒泡" /></div> 依次弹出”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“，因为阻止了事件冒泡。
2.事件捕获
既然有事件的冒泡，也可以有事件的捕获，这是一个相反的过程。区别是从顶层元素到目标元素或者从目标元素到顶层元素。
来看一段代码：

$input.addEventListener（"click", function（）{ this.style.border = "5px solid red"; alert（"red"）}, true）$div.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"，这就是事件的捕获。
3.阻止默认事件
有一些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://keleyi.com">柯乐义</a>默认事件没有了。

既然return false 和 e.preventDefault（）都是一样的效果，那它们有区别吗？当然有。
仅仅是在HTML事件属性和 DOM0级事件处理方法中才能通过返回 return false 的形式组织事件宿主的默认行为。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。