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 相关文章推荐
用prototype实现的简单小巧的多级联动菜单
Mar 24 Javascript
jQuery选择器全面总结
Jan 06 Javascript
javascript中的正则表达式使用指南
Mar 01 Javascript
jQuery遍历页面所有CheckBox查看是否被选中的方法
Apr 14 Javascript
javascript返回顶部的按钮实现方法
Jan 09 Javascript
jQuery基于扩展简单实现倒计时功能的方法
May 14 Javascript
jQuery之动画效果大全
Nov 09 Javascript
JS弹性运动实现方法分析
Dec 15 Javascript
vue2.0 + ele的循环表单及验证字段方法
Sep 18 Javascript
JS实现简单的文字无缝上下滚动功能示例
Jun 22 Javascript
layui点击弹框页面 表单请求的方法
Sep 21 Javascript
vue中的 $slot 获取插槽的节点实例
Nov 12 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
Yii调试SQL的常用方法
2014/07/09 PHP
php实现数组按指定KEY排序的方法
2015/03/30 PHP
mac os快速切换多个PHP版本的方法
2017/03/07 PHP
浅析PHP反序列化中过滤函数使用不当导致的对象注入问题
2020/02/15 PHP
JavaScript函数、方法、对象代码
2008/10/29 Javascript
javascript数组遍历for与for in区别详解
2014/12/04 Javascript
Javascript函数式编程语言
2015/10/11 Javascript
Bootstrap组件学习之导航、标签、面包屑导航(精品)
2016/05/17 Javascript
Bootstrop实现多级下拉菜单功能
2016/11/24 Javascript
VUE 更好的 ajax 上传处理 axios.js实现代码
2017/05/10 Javascript
ES6正则表达式扩展笔记
2017/07/25 Javascript
echarts学习笔记之箱线图的分析与绘制详解
2017/11/22 Javascript
vue-router路由懒加载和权限控制详解
2017/12/13 Javascript
Python 编码处理-str与Unicode的区别
2016/09/06 Python
Python使用中文正则表达式匹配指定中文字符串的方法示例
2017/01/20 Python
django模型层(model)进行建表、查询与删除的基础教程
2017/11/21 Python
学习python中matplotlib绘图设置坐标轴刻度、文本
2018/02/07 Python
Python利用Django如何写restful api接口详解
2018/06/08 Python
python 在某.py文件中调用其他.py内的函数的方法
2019/06/25 Python
深入分析python 排序
2020/08/24 Python
python对 MySQL 数据库进行增删改查的脚本
2020/10/22 Python
德国最大的网上鞋店之一:Schuhe24.de
2017/06/10 全球购物
Bath & Body Works阿联酋:在线购买沐浴和身体用品
2021/02/27 全球购物
数学专业毕业生自荐信
2013/11/10 职场文书
机电一体化职业规划书
2014/01/07 职场文书
中专毕业生自我鉴定
2014/02/02 职场文书
表彰会主持词
2014/03/26 职场文书
公司请假条范文
2014/04/11 职场文书
卫生院健康教育实施方案
2014/06/07 职场文书
三十年同学聚会感言
2015/07/30 职场文书
大学新生入学感想
2015/08/07 职场文书
2015年国庆放假通知范文
2015/08/18 职场文书
如何才能写好调研报告?
2019/07/03 职场文书
班干部竞选演讲稿(精选5篇)
2019/09/24 职场文书
yyds什么意思?90后已经听不懂00后讲话了……
2022/02/03 杂记
spring IOC容器的Bean管理XML自动装配过程
2022/05/30 Java/Android