JS事件流模型
JS事件流模型
事件捕获Event Capturing
是一种从上而下的传播方式,以click
事件为例,其会从最外层根节向内传播到达点击的节点,为从最外层节点逐渐向内传播直到目标节点的方式。
事件冒泡Event Bubbling
是一种从下往上的传播方式,同样以click
事件为例,事件最开始由点击的节点,然后逐渐向上传播直至最高层节点。
DOM0级模型
也称为原始事件模型,这种方式较为简单且兼容所有浏览器,但是却将界面与逻辑耦合在一起,可维护性差。
实例
当点击id
为i3
的<div>
时,浏览器会依次弹出2 1 0
<!DOCTYPE html>
<html>
<head>
<title>JS事件流模型</title>
</head>
<style type="text/css">
div{
display: flex;
justify-content: center;
align-items: center;
}
</style>
<body>
<div id="i1" style="height: 150px;width: 150px;background: red;" onclick="alert(0)">
<div id="i2" style="height: 100px;width: 100px;background: green;" onclick="alert(1)">
<div id="i3" style="height: 50px;width: 50px;background: blue;" onclick="alert(2)"></div>
</div>
</div>
</body>
</html>
IE事件模型
IE8
及之前的版本是不支持捕获事件的,IE
事件模型共有两个过程:
事件处理阶段target phase
,事件到达目标元素, 触发目标元素的监听事件。
事件冒泡阶段bubbling phase
事件从目标元素冒泡到document
,依次执行经过的节点绑定的事件。
DOM2级模型
DOM2
事件模型是W3C
制定的标准模型,支持捕获型事件和冒泡型事件,调用事件的处理阶段依次为捕获、目标、冒泡
实例
当点击id
为i3
的<div>
时,浏览器会依次弹出0 1 3 2
,addEventListener
方法的第三个参数为声明绑定的事件为捕获型还是冒泡型,默认为false
,也就是冒泡型
<!DOCTYPE html>
<html>
<head>
<title>JS事件流模型</title>
</head>
<style type="text/css">
div{
display: flex;
justify-content: center;
align-items: center;
}
</style>
<body>
<div id="i1" style="height: 150px;width: 150px;background: red;">
<div id="i2" style="height: 100px;width: 100px;background: green;">
<div id="i3" style="height: 50px;width: 50px;background: blue;"></div>
</div>
</div>
</body>
<script type="text/javascript">
document.addEventListener('click',(e) => {
alert(0);
},true)
document.getElementById("i1").addEventListener('click',(e) => {
alert(1);
},true)
document.getElementById("i2").addEventListener('click',(e) => {
alert(2);
})
document.getElementById("i3").addEventListener('click',(e) => {
alert(3);
})
</script>
</html>
document
对象与i1
节点绑定的是捕获型的监听事件,i2
与i3
节点绑定的是冒泡型的事件,事件传递的顺序为
window --- document --- html --- body --- i1 --- i2 --- i3 --- i2 --- i1 --- body --- html --- document --- window
从window
到i3
的过程为捕获阶段,依次执行了过程中绑定的事件,本例中执行了alert(0)
与alert(1)
,然后到达目标阶段的i3
,执行i3
绑定的事件alert(3)
,然后从i3
到window
的阶段为冒泡阶段,执行了绑定的alert(2)
,执行顺序即为0 1 3 2
。
注意
绑定监听事件使用的区别
在DOM0
中直接绑定函数执行时,后定义的函数会覆盖前边绑定的函数,下面这个例子只执行alert(1)
而不执行alert(0)
。click()
是一个对象事件,点击即触发onclick()
绑定的方法,onclick()
是对象的属性,将其绑定函数后即为click()
事件触发后执行的方法。
<!DOCTYPE html>
<html>
<head>
<title>JS事件流模型</title>
</head>
<style type="text/css">
div{
display: flex;
justify-content: center;
align-items: center;
}
</style>
<body>
<div id="i1" style="height: 150px;width: 150px;background: red;"></div>
</body>
<script type="text/javascript">
document.getElementById("i1").onclick = function(){
alert(0);
} // 被覆盖
document.getElementById("i1").onclick = function(){
alert(1);
} // 执行
</script>
</html>
addEventListener
可以为事件绑定多个函数,并且绑定时不需要加on
,其还可以接收第三个参数useCapture
来决定事件时绑定的捕获阶段还是冒泡阶段执行
document.getElementById("i1").addEventListener('click',(e) => {
alert(0);
}) // 执行
document.getElementById("i1").addEventListener('click',(e) => {
alert(1);
}) // 执行
attachEvent
可以为事件绑定多个函数,绑定时需要加on
,其只支持冒泡阶段执行,所以不存在第三个参数。
document.getElementById("i1").attachEvent('onclick',function(e){
alert(0);
}) // 执行
document.getElementById("i1").attachEvent('onclick',function(e){
alert(1);
}) // 执行
JS事件流模型的更多相关文章
- JS的事件绑定、事件流模型
.t1 { background-color: #ff8080; width: 1100px; height: 40px } 一.JS事件 (一)JS事件分类 1.鼠标事件:click/dbclick ...
- 深入理解JS的事件绑定、事件流模型
一.JS事件 (一)JS事件分类 1.鼠标事件: click/dbclick/mouseover/mouseout 2.HTML事件: onload/onunload/onsubmit/onresi ...
- JavaScript的事件、DOM模型、事件流模型以及内置对象详解(三)
JS中的事件 JS中的事件分类 1.鼠标事件: click/dbclick/mouseover/mouseout 2.HTML事件: onload/onunload/onsubmit/onresize ...
- JS事件流理解
事件是用户或浏览器自身执行的某种动作,如click,load和mouseover都是事件的名字. 事件是javaScript和DOM之间的桥梁. 你若触发,我便执行--事件发生,调用它的处理函数执行相 ...
- js事件流机制冒泡和捕获
JavaScript与HTML之间的交互是通过事件实现的.事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间. 事件流 从页面中接收事件的顺序称为事件流. IE --> 事件冒泡流 Netsc ...
- js --- 事件流
1.事件流 事件发生时会在元素节点与根节点之间按照特定的顺序传播,路径所经过的所有节点都会收到该事件,这个传播过程即DOM事件流. 2.两种事件流模型 1.冒泡型事件流:事件的传播是从最特定的事件目标 ...
- JS事件流、事件监听、事件对象、事件委托
JS事件流: 01.DOM级别和DOM事件 02.JS事件流:页面中接收事件的顺序 事件冒泡阶段-->处于目标阶段-->事件捕获阶段 (事件捕获总发生在事件冒泡前面) 03.捕获:从外向里 ...
- js 事件流和事件冒泡阻止
js 事件流和事件冒泡阻止 事件流 当浏览器发展到第四代的时候(IE4与Netscape4)浏览器开发团队遇到一个有意思的的问题: 页面的哪一部分会拥有某个特定的事件? 比如在纸上画上一组同心圆,如果 ...
- JS事件流(W3C与IE区别)
一.JS事件的3个阶段:捕获.目标.冒泡,低版本IE不支持捕获阶段: 二.在浏览器解析事件的时候,有两种触发方式:一种叫做Bubbling(冒泡),另外一种叫做Capturing(捕获). 冒泡的方式 ...
随机推荐
- 算法设计与分析-Week12
题目描述 You are given coins of different denominations and a total amount of money amount. Write a func ...
- Proto3:编码
本文介绍protocol buffer消息二进制传输格式.在应用程序中使用protocol buffer时,你并不需要了解这些,但它对你了解protocol buffer格式如何影响你的编码消息的大小 ...
- CentOS7安装Ceph
CentOS 7 下安装Ceph-nautilus 本问主要记录在CentOS 7下如何安装Ceph-nautilus,安装过程中遇到的一些问题及解决方法. 实验准备 以下是本次实验所用到的机器(采用 ...
- 自动贩卖机VS无人门店:谁是真正的零售新风口?
原本在线上不断发力,让实体店几乎凋敝的电商,却忽然对线下兴趣大增.阿里疯狂入股.收购线下商超:京东要在全国范围内开设百万家便利店,仅在农村就将开设50万家--这一股浪潮,或将直接改变整个百货零售 ...
- C++走向远洋——58(项目二3、动物这样叫、改进版)
*/ * Copyright (c) 2016,烟台大学计算机与控制工程学院 * All rights reserved. * 文件名:text.cpp * 作者:常轩 * 微信公众号:Worldhe ...
- 使用HBuilder开发移动APP:开发环境准备(转)
一直想开发个APP玩玩的,但是作为一个PHP码农,需要新学习JAVA或者Object C,这也是一直没能实现这个目标的原因.但是现在HTML5+.APPCAN.apicloud很多工具利用前端技术就能 ...
- vue——一个页面实现音乐播放器
请忽略下面这段文字年关将至,时间好歹又多出了些许.却不敢过度消遣.岁月未曾饶过我,我亦不想饶过岁月.且将它塞得膨胀,让这一年看似加更充实.不曾料想我一个爱些风花雪月.研墨行歌之人,却做起了碼农这一行当 ...
- 学以致用:手把手教你撸一个工具库并打包发布,顺便解决JS浮点数计算精度问题
本文讲解的是怎么实现一个工具库并打包发布到npm给大家使用.本文实现的工具是一个分数计算器,大家考虑如下情况: \[ \sqrt{(((\frac{1}{3}+3.5)*\frac{2}{9}-\fr ...
- Redux 架构理解
Redux 是一种前端“架构模式”,是 Flux 架构的一种变种,用来提供可预测的状态管理.虽然经常和 React 一起被提及,但是 Redux 却不仅仅只能用于 React,还可以将其运用到其他前端 ...
- AX中Json转化成表记录
static void JsonToTable(str _json,Common _Common){ sysdictTable dictTable; TableId ...