javascript事件之: 事件冒泡, 事件捕获 ,阻止默认事件
2014-12-11 00:45
453 查看
谈起JavaScript的 事件,事件冒泡、事件捕获、阻止默认事件这三个话题,无论是面试还是在平时的工作中,都很难避免。
冒泡篇:
先来看一段实例:
js:
html:
依次弹出”red“,"green","yellow"。
你的本意是触发button这个元素,却连同父元素绑定的事件一同触发。这就是事件冒泡。
如果对input的事件绑定改为:
这个时候只会弹出”red“
因为阻止了事件冒泡。
捕获篇:
既然有事件的冒泡,也可以有事件的捕获,这是一个相反的过程。区别是从顶层元素到目标元素或者从目标元素到顶层元素。
来看代码:
这个时候依次弹出”yellow“,"green","red"。
这就是事件的捕获。
如果把addEventListener方法的第三个参数改成false,则表示只在冒泡的阶段触发,弹出的依次为:”red“,"green","yellow"。
阻止默认事件篇:
有一些html元素默认的行为,比如说a标签,点击后有跳转动作;form表单中的submit类型的input有一个默认提交跳转事件;reset类型的input有重置表单行为。
如果你想阻止这些浏览器默认行为,JavaScript为你提供了方法。
先上代码
默认事件没有了。
既然return false 和 e.preventDefault()都是一样的效果,那它们有区别吗?当然有。
仅仅是在HTML事件属性 和 DOM0级事件处理方法中 才能通过返回 return false 的形式组织事件宿主的默认行为。
注意:以上都是基于W3C标准,没有考虑到IE的不同实现。
冒泡篇:
先来看一段实例:
js:
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“
因为阻止了事件冒泡。
捕获篇:
既然有事件的冒泡,也可以有事件的捕获,这是一个相反的过程。区别是从顶层元素到目标元素或者从目标元素到顶层元素。
来看代码:
$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"。
这就是事件的捕获。
如果把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的不同实现。
相关文章推荐
- javascript事件之: 事件冒泡, 事件捕获 ,阻止默认事件
- JavaScript 事件监听, 事件冒泡, 事件捕获, 阻止默认的事件
- JavaScript事件冒泡、事件捕获和阻止默认事件
- JavaScript之事件的处理模型---事件冒泡,捕获及取消冒泡,阻止默认事件
- JavaScript中事件捕获和事件冒泡以及如何阻止冒泡事件和默认事件
- JavaScript事件冒泡、事件捕获和阻止默认事件
- javascript事件之: 事件冒泡, 事件捕获 ,阻止默认事件
- javascript事件之:事件冒泡, 事件捕获 ,默认事件阻止
- JavaScript停止冒泡事件和阻止默认事件
- javascript 停止事件冒泡以及阻止默认事件冒泡
- javascript 绑定事件 阻止冒泡和默认事件
- javascript的阻止默认事件和阻止冒泡事件
- javascript阻止事件冒泡和浏览器的默认行为
- js事件冒泡、事件捕获和阻止默认事件详解
- javascript阻止事件冒泡和浏览器的默认行为
- javascript阻止事件冒泡和浏览器的默认行为
- javascript中阻止事件冒泡,阻止事件默认行为
- javascript阻止冒泡和默认事件(默认行为)
- javascript 阻止事件冒泡 与 浏览器的默认行为
- javascript事件冒泡详解和捕获、阻止方法