js事件冒泡、事件捕获和阻止默认事件详解
来源:互联网 发布:张氏短打淘宝 编辑:程序博客网 时间:2024/05/21 06:02
js事件冒泡、事件捕获和阻止默认事件详解
原文链接:http://u.cxyblog.com/28/article-aid-3391.html?ref=myread
作者: wodi0007
被查看 406 次 收藏(0)次
分享到:更多
谈起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 的形式组织事件宿主的默认行为。
0 0
- js事件冒泡、事件捕获和阻止默认事件详解
- 阻止事件冒泡、捕获、和默认事件
- JS 事件冒泡、事件捕获 、阻止默认事件
- JavaScript事件冒泡、事件捕获和阻止默认事件
- js 阻止默认事件 和事件冒泡
- javascript事件之: 事件冒泡, 事件捕获 ,阻止默认事件
- javascript事件之: 事件冒泡, 事件捕获 ,阻止默认事件
- javascript事件之:事件冒泡, 事件捕获 ,默认事件阻止
- JS事件冒泡和事件捕获详解
- js事件冒泡和事件捕获详解
- JavaScript中事件捕获和事件冒泡以及如何阻止冒泡事件和默认事件
- 事件委托/事件冒泡/事件捕获&&阻止事件冒泡/阻止事件默认行为
- JS事件绑定、冒泡/捕获、常见的兼容处理、委托、阻止默认行为和冒泡
- js /jquery停止事件冒泡和阻止浏览器默认事件
- vue.js阻止事件冒泡和默认事件
- 阻止冒泡和默认事件
- JS 阻止冒泡与阻止默认事件
- [JS]笔记12之事件机制--事件冒泡和捕获--事件监听--阻止事件传播
- AutoLayout的那些事(二)
- Linux下使用maven+svn构建Java项目
- 请求转发和重定向
- VLAN原理详解
- HDU 5608 function(数论)
- js事件冒泡、事件捕获和阻止默认事件详解
- c#学习笔记(一)
- @Value
- RVDS4.0硬件仿真,同步显示C代码,完全取代RVDS2.2
- android上传下载系列:断点上传&断点下载对比一览
- 修改dmp文件的表空间
- 1042. Shuffling Machine (20)
- log4j配置文档
- 学密码学一定得学程序