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实现商品倒计时实现代码
May 03 Javascript
获得Javascript对象属性个数的示例代码
Nov 21 Javascript
js获取select标签选中值的两种方式
Jan 09 Javascript
jsonp跨域请求数据实现手机号码查询实例分析
Dec 12 Javascript
原生js仿jquery实现对Ajax的封装
Oct 04 Javascript
vue+vuex+axio从后台获取数据存入vuex实现组件之间共享数据
Apr 22 Javascript
Vue实现搜索 和新闻列表功能简单范例
Mar 16 Javascript
对vue下点击事件传参和不传参的区别详解
Sep 15 Javascript
Node批量爬取头条视频并保存方法
Sep 20 Javascript
npm scripts 使用指南详解
Oct 08 Javascript
js实现旋转木马轮播图效果
Jan 10 Javascript
jQuery实现日历效果
Sep 11 jQuery
使用伪命名空间封装保护独自创建的对象方法
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
图片存储与浏览一例(Linux+Apache+PHP+MySQL)
2006/10/09 PHP
PHP中上传多个文件的表单设计例子
2014/11/19 PHP
php比较两个字符串长度的方法
2015/07/13 PHP
利用PHP_XLSXWriter代替PHPExcel的方法示例
2017/07/16 PHP
PHP使用ActiveMQ实现消息队列的方法详解
2019/05/31 PHP
filemanage功能中用到的lib.js
2007/04/08 Javascript
实用的Jquery选项卡TAB示例代码
2013/08/28 Javascript
jquery实现可拖拽弹出层特效
2015/01/04 Javascript
完美兼容多浏览器的js判断图片路径代码汇总
2015/04/17 Javascript
Jquery全选与反选点击执行一次的解决方案
2015/08/14 Javascript
详解JavaScript基于面向对象之创建对象(2)
2015/12/10 Javascript
原生js实现autocomplete插件
2016/04/14 Javascript
AngularJS中如何使用echart插件示例详解
2016/10/26 Javascript
关于javascript获取内联样式与嵌入式样式的实例
2017/06/01 Javascript
原生JS实现的轮播图功能详解
2018/08/06 Javascript
vue 项目接口管理的实现
2019/01/17 Javascript
[03:51]吞吞映像 每周精彩击杀top10第二弹
2014/06/25 DOTA
Python聊天室程序(基础版)
2018/04/01 Python
Python对excel文档的操作方法详解
2018/12/10 Python
python采集微信公众号文章
2018/12/20 Python
Python 计算任意两向量之间的夹角方法
2019/07/05 Python
利用PyQt5+Matplotlib 绘制静态/动态图的实现代码
2020/07/13 Python
python中PyQuery库用法分享
2021/01/15 Python
Python 图片处理库exifread详解
2021/02/25 Python
CSS3 实现倒计时效果
2020/11/25 HTML / CSS
html5实现完美兼容各大浏览器的播放器
2014/12/26 HTML / CSS
大学生入党思想汇报
2014/01/14 职场文书
2014年迎新年联欢会活动策划方案
2014/02/26 职场文书
中考冲刺决心书
2014/03/11 职场文书
促销活动总结范文
2014/04/30 职场文书
工地标语大全
2014/06/18 职场文书
天气温馨提示语
2015/07/14 职场文书
安全生产感想
2015/08/07 职场文书
导游词之江苏同里古镇
2019/11/18 职场文书
2019年最新感恩节祝福语(28句)
2019/11/27 职场文书
react中的DOM操作实现
2021/06/30 Javascript