一、JS事件的三个阶段

事件处理机制的三个阶段：1.捕获 2.目标 3.冒泡

element.addEventListener(event, function, useCapture)
useCapture:事件处理机制（捕获阶段true，目标阶段，冒泡阶段false）默认为冒泡阶段
捕获阶段：事件从外向内执行; 冒泡阶段：事件从内向外执行

当点击目标元素的时候就是这三步，唯一的区别是你控制事件触发在哪个阶段。

所以我们可以看到要想截获事件必须要在目标元素事件发生之前，也就是捕获阶段。

二、冒泡阶段触发事件

<style>#father {height: 200px;width: 200px;background-color: red;}#son {height: 100px;width: 100px;background-color: green;}
</style>
</head><body><div id="father"><div id="son"></div></div>
</body>
<script>document.getElementById('father').addEventListener('click', function (e) {console.log('这是father')}, false)document.getElementById('son').addEventListener('click', function (e) {console.log('这是son')}, false)
</script>

点击绿色区域时
冒泡阶段：事件从内向外执行

三、捕获阶段触发事件

<style>#father {height: 200px;width: 200px;background-color: red;}#son {height: 100px;width: 100px;background-color: green;}
</style>
</head><body><div id="father"><div id="son"></div></div>
</body>
<script>document.getElementById('father').addEventListener('click', function (e) {console.log('这是father')}, true)document.getElementById('son').addEventListener('click', function (e) {console.log('这是son')}, true)
</script>

点击绿色区域时
捕获阶段：事件从外向内执行

四、阻止冒泡行为

<style>#father {height: 200px;width: 200px;background-color: red;}#son {height: 100px;width: 100px;background-color: green;}
</style>
</head><body><div id="father"><div id="son"></div></div>
</body>
<script>document.getElementById('father').addEventListener('click', function (e) {console.log('这是father')}, false)document.getElementById('son').addEventListener('click', function (e) {console.log('这是son')e.stopPropagation()}, false)
</script>

点击绿色区域时
此时只会打印本身id为son的div，不会打印父级fathe的rdiv

五、阻止事件冒泡和默认行为

阻止事件的冒泡方法
w3c的方法是e.stopPropagation()，IE则是使用e.cancelBubble = true

event.stopPropagation()方法这是阻止事件的冒泡方法，不让事件向documen上蔓延，但是默认事件任然会执行，当你掉用这个方法的时候，如果点击一个连接，这个连接仍然会被打开，

window.event?window.event.cancelBubble=true:e.stopPropagation();

阻止默认事件的方法
w3c的方法是e.preventDefault()，IE则是使用e.returnValue = false;

event.preventDefault()方法这是阻止默认事件的方法，调用此方法是，连接不会被打开，但是会发生冒泡，冒泡会传递到上一层的父元素；

window.event?window.event.returnValue=false:e.preventDefault();

即能阻止事件冒泡也能阻止默认事件

javascript的return false只会阻止默认行为，而用jQuery的话则既阻止默认行为又防止对象冒泡。

JS事件的三个阶段详解相关推荐

JS 事件大全及详解
事件详解: 事件不会自己执行,需要触发(即事件被触发之后才可执行) 1.事件三要素: - 事件对象 - 事件名称 - 事件处理函数 2.常见事件写法: 1.嵌入式(传统事件绑定)优点:简单易懂缺点:将 ...
php事件和行为,Yii框架组件和事件行为管理详解
Yii框架组件和事件行为管理详解来源:中文源码网浏览: 次日期:2018年9月2日 [下载文档: Yii框架组件和事件行为管理详解.txt ] (友情提示:右键点上行txt文档名- ...
JavaScript 的addEventListener() 事件监听详解！
JavaScript 的addEventListener() 事件监听详解! addEventListener() 用于向指定元素添加事件. 可以向一个元素添加多次事件或者多次不同事件,后面的事件是 ...
android listview ontouchlistener,Android ListView监听滑动事件的方法(详解)
ListView的主要有两种滑动事件监听方法,OnTouchListener和OnScrollListener 1.OnTouchListener OnTouchListener方法来自View中的监 ...
nodejs 本地php服务器,node.js创建本地服务器详解
本文主要和大家分享node.js创建本地服务器详解,简易上手node.js后,我们就可以在自己电脑上创建本地服务器了.希望能帮助到大家. 一.先上代码.//请求Node.js自带的http模块. va ...
Android 系统（199）---Android事件分发机制详解
Android事件分发机制详解前言 Android事件分发机制是Android开发者必须了解的基础网上有大量关于Android事件分发机制的文章,但存在一些问题:内容不全.思路不清晰.无源码分析. ...
JQuery在循环中绑定事件的问题详解
JQuery在循环中绑定事件的问题详解有个页面上需要N个DOM,每个DOM里面的元素ID都要以数字结尾,比如说 ? 1 2 3 <input type="text" nam ...
html学习 - jquery事件监听详解
html学习 - jquery事件监听详解 html学习 - jquery事件监听详解监听方法监听方法参数解释 click参数事件自动执行问题解决 bind方法 live方法监听方法在jqu ...
js打印三角形超详解
js打印三角形超详解 j控制星星的总行数,i控制每行星星的打印个数打印图形如下: (1) (2) //str=""用来存储星星// 理解步骤1:在一行输出6个星星如何操作,在循环 ...

JS事件的三个阶段详解