JS 事件冒泡、事件捕获 、阻止默认事件
来源:互联网 发布:java接口的使用方法 编辑:程序博客网 时间:2024/06/05 00:30
谈起JavaScript的 事件,事件冒泡、事件捕获、阻止默认事件这三个话题,无论是面试还是在平时的工作中,都很难避免。
冒泡篇:
先来看一段实例:
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为你提供了方法。
先上代码
1 var $a = document.getElementsByTagName("a")[0];
2 $a.onclick = function(e){
3 alert("跳转动作被我阻止了")
4 e.preventDefault();
5 //return false;//也可以
6 }
默认事件没有了。
既然return false 和 e.preventDefault()都是一样的效果,那它们有区别吗?当然有。
仅仅是在HTML事件属性 和 DOM0级事件处理方法中 才能通过返回 return false 的形式组织事件宿主的默认行为。
0 0
- js事件冒泡、事件捕获和阻止默认事件详解
- JS 事件冒泡、事件捕获 、阻止默认事件
- 阻止事件冒泡、捕获、和默认事件
- javascript事件之: 事件冒泡, 事件捕获 ,阻止默认事件
- javascript事件之: 事件冒泡, 事件捕获 ,阻止默认事件
- javascript事件之:事件冒泡, 事件捕获 ,默认事件阻止
- 事件委托/事件冒泡/事件捕获&&阻止事件冒泡/阻止事件默认行为
- JavaScript事件冒泡、事件捕获和阻止默认事件
- js 阻止默认事件 和事件冒泡
- JS 阻止冒泡与阻止默认事件
- js阻止默认事件与js阻止事件冒泡示例
- 阻止事件冒泡 默认事件
- js阻止默认事件与js阻止事件冒泡示例分享 js阻止冒泡事件
- js 阻止元素(文档)默认事件,阻止冒泡事件
- js中阻止默认事件,阻止冒泡事件
- Js学习笔记-事件冒泡、事件捕获、阻止默认行为
- JavaScript中事件捕获和事件冒泡以及如何阻止冒泡事件和默认事件
- js 阻止事件捕获
- error C2143: 语法错误 : 缺少“;”(在“using”的前面)
- NavigationView的一些故事
- VR 圈里经常被提起的概念:低余辉、异步时间扭曲等
- iOS---取出字符串中的数字
- ERROR: Failed to connect to MySQL server: DBI connect(';mysql_read_default_file
- JS 事件冒泡、事件捕获 、阻止默认事件
- DataCastle[猜你喜欢]推荐系统竞赛——Kuhung思路及代码
- SqlServer的存储过程基本语法
- 设计比较好,有助于学习的Github上的iOS App源码 (中文)
- 关于android中bitmap使用时的oom的一些解决方法
- Oracle字符函数
- 常用php函数,来自互联网
- SpringMVC与Mybatis集合实现分页功能(实际项目)
- 悬浮怪物血条功能