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


Posted in Javascript onAugust 04, 2016

谈起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 的形式组织事件宿主的默认行为。

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js下利用控制器载入对应脚本
Jul 17 Javascript
jQuery实现id模糊查询的小例子
Mar 19 Javascript
jquery右下角自动弹出可关闭的广告层
May 08 Javascript
JavaScript使用位运算符判断奇数和偶数的方法
Jun 01 Javascript
angularjs学习笔记之三大模块(modal,controller,view)
Sep 26 Javascript
JS实现浏览器状态栏显示时间的方法
Oct 27 Javascript
JavaScript实现打开链接页面的方式汇总
Jun 02 Javascript
angularJS 如何读写缓冲的方法(推荐)
Aug 06 Javascript
AngularJS中比较两个数组是否相同
Aug 24 Javascript
三分钟学会用ES7中的Async/Await进行异步编程
Jun 14 Javascript
原生js添加一个或多个类名的方法分析
Jul 30 Javascript
详解VUE中的插值( Interpolation)语法
Oct 18 Javascript
使用伪命名空间封装保护独自创建的对象方法
Aug 04 #Javascript
全面解析Angular中$Apply()及$Digest()的区别
Aug 04 #Javascript
window.open不被拦截的简单实现代码(推荐)
Aug 04 #Javascript
js实现多图左右切换功能
Aug 04 #Javascript
window.open打开窗口被拦截的快速解决方法
Aug 04 #Javascript
浅谈js中子页面父页面方法 变量相互调用
Aug 04 #Javascript
JS图片等比例缩放方法完整示例
Aug 03 #Javascript
You might like
php 获取完整url地址
2008/12/20 PHP
CURL状态码列表(详细)
2013/06/27 PHP
JavaScript中几种常见排序算法小结
2011/02/22 Javascript
javascript中的正则表达式使用指南
2015/03/01 Javascript
javascript判断数组内是否重复的方法
2015/04/21 Javascript
jQuery实现Meizu魅族官方网站的导航菜单效果
2015/09/14 Javascript
jQuery操作dom实现弹出页面遮罩层(web端和移动端阻止遮罩层的滑动)
2016/08/25 Javascript
vue v-model表单控件绑定详解
2017/05/17 Javascript
JavaScript实现跟随滚动缓冲运动广告框
2017/07/15 Javascript
jQuery中.attr()和.data()的区别分析
2017/09/03 jQuery
浅析JS抽象工厂模式
2017/12/14 Javascript
说说如何利用 Node.js 代理解决跨域问题
2019/04/22 Javascript
vue+axios实现post文件下载
2019/09/25 Javascript
解决Vue的项目使用Element ui 走马灯无法实现的问题
2020/08/03 Javascript
PyCharm代码提示忽略大小写设置方法
2018/10/28 Python
使用Python操作FTP实现上传和下载的方法
2019/04/01 Python
python binascii 进制转换实例
2019/06/12 Python
用Python批量把文件复制到另一个文件夹的实现方法
2019/08/16 Python
python3 requests库实现多图片爬取教程
2019/12/18 Python
windows下python安装pip方法详解
2020/02/10 Python
Python写出新冠状病毒确诊人数地图的方法
2020/02/12 Python
使用python编写一个语音朗读闹钟功能的示例代码
2020/07/14 Python
浅谈如何使用python抓取网页中的动态数据实现
2020/08/17 Python
python 浮点数四舍五入需要注意的地方
2020/08/18 Python
通俗讲解python 装饰器
2020/09/07 Python
CSS3 实现弹跳的小球动画
2020/10/26 HTML / CSS
元旦联欢会主持词
2014/03/26 职场文书
增员口号大全
2014/06/18 职场文书
网络文明传播志愿者活动方案
2014/08/20 职场文书
整顿机关作风心得体会
2014/09/10 职场文书
人事行政助理岗位职责
2015/04/11 职场文书
2015年领班工作总结
2015/04/29 职场文书
电影开国大典观后感
2015/06/04 职场文书
高中优秀作文(范文)
2019/08/15 职场文书
Python re.sub 反向引用的实现
2021/07/07 Python
SQL基础查询和LINQ集成化查询
2022/01/18 MySQL