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 相关文章推荐
jQuery 隔行换色 支持键盘上下键,按Enter选定值
Aug 02 Javascript
ASP.NET中使用后端代码注册脚本 生成JQUERY-EASYUI的界面错位的解决方法
Jun 12 Javascript
js表单处理中单选、多选、选择框值的获取及表单的序列化
Mar 08 Javascript
功能强大的Bootstrap组件(结合js)
Aug 03 Javascript
深入理解JavaScript定时机制
Oct 27 Javascript
canvas实现流星雨的背景效果
Jan 13 Javascript
Javascript中的 “&amp;” 和 “|” 详解
Feb 02 Javascript
面试题:react和vue的区别分析
Apr 08 Javascript
Layui 带多选框表格监听事件以及按钮自动点击写法实例
Sep 02 Javascript
Swiper实现导航栏滚动效果
Oct 16 Javascript
在antd Form表单中select设置初始值操作
Nov 02 Javascript
解决vant框架做H5时踩过的坑(下拉刷新、上拉加载等)
Nov 11 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中对xml读取的相关函数的介绍一
2008/06/05 PHP
php表单敏感字符过滤类
2014/12/08 PHP
php实现简单的上传进度条
2015/11/17 PHP
功能强大的PHP POST提交数据类
2016/07/15 PHP
Laravel框架创建路由的方法详解
2019/09/04 PHP
laravel Validator ajax返回错误信息的方法
2019/09/29 PHP
【消息提示组件】,兼容IE6/7&amp;&amp;FF2
2007/09/04 Javascript
JavaScript 组件之旅(二)编码实现和算法
2009/10/28 Javascript
javascript中最常用的继承模式 组合继承
2010/08/12 Javascript
jquery 卷帘效果实现代码(不同方向)
2013/02/05 Javascript
最丑的时钟效果!js canvas时钟制作方法
2016/08/15 Javascript
js防阻塞加载的实现方法
2016/09/09 Javascript
一个例子轻松学会Vue.js
2017/01/02 Javascript
vue 2.0组件与v-model详解
2017/03/27 Javascript
angularjs实现上拉加载和下拉刷新数据功能
2017/06/12 Javascript
BootStrap Table实现server分页序号连续显示功能(当前页从上一页的结束序号开始)
2017/09/12 Javascript
EL表达式截取字符串的函数说明
2017/09/22 Javascript
Vue使用localStorage存储数据的方法
2019/05/27 Javascript
js实现简易计算器功能
2019/10/18 Javascript
Echarts实现多条折线可拖拽效果
2019/12/19 Javascript
node.JS路径解析之PATH模块使用方法详解
2020/02/06 Javascript
约瑟夫问题的Python和C++求解方法
2015/08/20 Python
python中hashlib模块用法示例
2017/10/30 Python
Python自动化运维_文件内容差异对比分析
2017/12/13 Python
postman模拟访问具有Session的post请求方法
2019/07/15 Python
Django自定义模板过滤器和标签的实现方法
2019/08/21 Python
Python提取视频中图片的示例(按帧、按秒)
2020/10/22 Python
Django 权限管理(permissions)与用户组(group)详解
2020/11/30 Python
Boston Proper官网:美国女装品牌
2017/10/30 全球购物
如果让你测试一台高速激光打印机,你都会进行哪些测试
2012/12/04 面试题
新农村建设典型材料
2014/05/31 职场文书
高中美术教师事迹材料
2014/08/22 职场文书
标准版离职证明书
2014/09/12 职场文书
2015年机关党建工作总结
2015/05/22 职场文书
八月一日观后感
2015/06/10 职场文书
咖啡厅里的创业计划书
2019/08/21 职场文书