JS事件流模型

事件捕获Event Capturing是一种从上而下的传播方式,以click事件为例,其会从最外层根节向内传播到达点击的节点,为从最外层节点逐渐向内传播直到目标节点的方式。

事件冒泡Event Bubbling是一种从下往上的传播方式,同样以click事件为例,事件最开始由点击的节点,然后逐渐向上传播直至最高层节点。

DOM0级模型

也称为原始事件模型,这种方式较为简单且兼容所有浏览器,但是却将界面与逻辑耦合在一起,可维护性差。

实例

当点击idi3<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制定的标准模型,支持捕获型事件和冒泡型事件,调用事件的处理阶段依次为捕获、目标、冒泡

实例

当点击idi3<div>时,浏览器会依次弹出0 1 3 2addEventListener方法的第三个参数为声明绑定的事件为捕获型还是冒泡型,默认为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节点绑定的是捕获型的监听事件,i2i3节点绑定的是冒泡型的事件,事件传递的顺序为

window --- document --- html --- body --- i1 --- i2 --- i3 --- i2 --- i1 --- body --- html --- document --- window

windowi3的过程为捕获阶段,依次执行了过程中绑定的事件,本例中执行了alert(0)alert(1),然后到达目标阶段i3,执行i3绑定的事件alert(3),然后从i3window的阶段为冒泡阶段,执行了绑定的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事件流模型的更多相关文章

  1. JS的事件绑定、事件流模型

    .t1 { background-color: #ff8080; width: 1100px; height: 40px } 一.JS事件 (一)JS事件分类 1.鼠标事件:click/dbclick ...

  2. 深入理解JS的事件绑定、事件流模型

     一.JS事件 (一)JS事件分类 1.鼠标事件: click/dbclick/mouseover/mouseout 2.HTML事件: onload/onunload/onsubmit/onresi ...

  3. JavaScript的事件、DOM模型、事件流模型以及内置对象详解(三)

    JS中的事件 JS中的事件分类 1.鼠标事件: click/dbclick/mouseover/mouseout 2.HTML事件: onload/onunload/onsubmit/onresize ...

  4. JS事件流理解

    事件是用户或浏览器自身执行的某种动作,如click,load和mouseover都是事件的名字. 事件是javaScript和DOM之间的桥梁. 你若触发,我便执行--事件发生,调用它的处理函数执行相 ...

  5. js事件流机制冒泡和捕获

    JavaScript与HTML之间的交互是通过事件实现的.事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间. 事件流 从页面中接收事件的顺序称为事件流. IE --> 事件冒泡流 Netsc ...

  6. js --- 事件流

    1.事件流 事件发生时会在元素节点与根节点之间按照特定的顺序传播,路径所经过的所有节点都会收到该事件,这个传播过程即DOM事件流. 2.两种事件流模型 1.冒泡型事件流:事件的传播是从最特定的事件目标 ...

  7. JS事件流、事件监听、事件对象、事件委托

    JS事件流: 01.DOM级别和DOM事件 02.JS事件流:页面中接收事件的顺序 事件冒泡阶段-->处于目标阶段-->事件捕获阶段 (事件捕获总发生在事件冒泡前面) 03.捕获:从外向里 ...

  8. js 事件流和事件冒泡阻止

    js 事件流和事件冒泡阻止 事件流 当浏览器发展到第四代的时候(IE4与Netscape4)浏览器开发团队遇到一个有意思的的问题: 页面的哪一部分会拥有某个特定的事件? 比如在纸上画上一组同心圆,如果 ...

  9. JS事件流(W3C与IE区别)

    一.JS事件的3个阶段:捕获.目标.冒泡,低版本IE不支持捕获阶段: 二.在浏览器解析事件的时候,有两种触发方式:一种叫做Bubbling(冒泡),另外一种叫做Capturing(捕获). 冒泡的方式 ...

随机推荐

  1. 一分钟搞定pychram远程调试和同步代码

    首先说一下需求,否则很多人都不知道pycharm这个远程同步和调试到底是干嘛使的. 需求很简单,我想要在本地的windows机器上跑一个程序,但是程序运行会加载一些很占内存的树型数据结构,称其为tre ...

  2. Python实现链表倒序(带头指针)

    class ListNode(object): def __init__(self, x): self.val = x self.next = None def reverseList(self, h ...

  3. Linux下无法生成core文件的解决办法

    1.检查ulimit [root ~]# ulimit -c 0 0:表示禁止生成core文件,此时需要执行ulimit -c unlimited(临时生效),或者在.bashrc中添加“ulimit ...

  4. Java的锁机制--synchronsized关键字

    引言 高并发环境下,多线程可能需要同时访问一个资源,并交替执行非原子性的操作,很容易出现最终结果与期望值相违背的情况,或者直接引发程序错误. 举个简单示例,存在一个初始静态变量count=0,两个线程 ...

  5. iPhone8的十面埋伏

    ​ 不知不觉,iPhone已经走到了第十个年头,也正因如此,业界最普遍的预测就是:iPhone8会出现颠覆性创新,让人眼前一亮的同时,给苹果再度续命.平心而论,苹果早就青史留名,创造了大量的奇迹,科技 ...

  6. 当鼠标hover的时候,使用tip将overflow:hidden隐藏的文字显示完全

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. Java入门教程一(Java简介)

    什么是Java语言 Java 是由 Sun Microsystems 公司于 1995 年推出的一门面向对象程序设计语言.2010 年 Oracle 公司收购 Sun Microsystems,之后由 ...

  8. YiGo环境搭建

    软件环境 操作系统:Windows 2000+,Mac OS,AIX,RedHat linux,HP-UX等 JDK/JRE:Oracle JDK/JRE 1.8+,IBM J9 VM 1.8+,Op ...

  9. 7-35 jmu-python-求三角形面积及周长 (10 分)

    输入的三角形的三条边a.b.c,计算并输出面积和周长.假设输入三角形三边是合法整形数据. 三角形面积计算公式:  ,其中s=(a+b+c)/2. import math #导入math库 math.s ...

  10. 前后端分离下的跨域CAS请求

    最重要的两点: ajax请求跨域的时候,默认不会携带cookie. 请求分为普通请求(HttpRequest)和Ajax请求(XMLHttpRequest) 先屡一下跨域CAS认证的流程: 前端发起a ...