12-事件模型(也就是一个先后触发顺序)

最新推荐文章于 2024-06-10 22:18:41 发布

敲啊敲9527

最新推荐文章于 2024-06-10 22:18:41 发布

阅读量370

点赞数

分类专栏： javaScript部分原理文章标签： javascript

本文链接：https://blog.csdn.net/weixin_44423378/article/details/131208312

版权

javaScript部分原理专栏收录该内容

33 篇文章 0 订阅

订阅专栏

一、事件与事件流

在这里插入图片描述

HTML文档、浏览器中发生的一种交互。使得具备互动性，加载、鼠标、自定义事件。

由于DOM是一个树结构，意味着标签存在嵌套关系，当绑定事件的时候，当触发子节点的时候，一个顺序问题，概念-事件流

三个阶段

捕获阶段
目标阶段
冒泡阶段

在这里插入图片描述
事件冒泡是一种从下往上的传播方式，由最具体的元素（触发节点）然后逐渐向上传播到最不具体的那个节点，也就是DOM

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Event Bubbling</title>
    </head>
    <body>
        <button id="clickMe">Click Me</button>
    </body>
</html>

然后，我们给button和它的父元素，加入点击事件

var button = document.getElementById('clickMe');

button.onclick = function() {
  console.log('1.Button');
};
document.body.onclick = function() {
  console.log('2.body');
};
document.onclick = function() {
  console.log('3.document');
};
window.onclick = function() {
  console.log('4.window');
};

点击按钮，输出如下

1.button
2.body
3.document
4.window

点击事件首先在button元素上发生，然后逐级向上传播

事件捕获与事件冒泡相反，事件最开始由不太具体的节点最早接受事件, 而最具体的节点（触发节点）最后接受事件

二、事件模型

原始事件模型（DOM0级）
标准事件模型（DOM2级）
IE事件模型（基本不用）

原始事件模型

事件绑定监听函数比较简单, 有两种方式：

HTML代码中直接绑定

通过JS代码绑定

特性

绑定速度快

DOM0级事件具有很好的跨浏览器优势，会以最快的速度绑定，但由于绑定速度太快，可能页面还未完全加载出来，以至于事件可能无法正常运行

只支持冒泡，不支持捕获
同一个类型的事件只能绑定一次

当希望为同一个元素绑定多个同类型事件的时候，是不被允许的，后绑定的事件会覆盖之前的事件

删除 DOM0 级事件处理程序只要将对应事件属性置为null即可

标准事件模型

在该事件模型中，一次事件共有三个过程:

事件捕获阶段：事件从document一直向下传播到目标元素, 依次检查经过的节点是否绑定了事件监听函数，如果有则执行
事件处理阶段：事件到达目标元素, 触发目标元素的监听函数
事件冒泡阶段：事件从目标元素冒泡到document, 依次检查经过的节点是否绑定了事件监听函数，如果有则执行

事件绑定监听函数的方式如下

addEventListener(eventType, handler, useCapture)

事件移除监听函数的方式如下:

removeEventListener(eventType, handler, useCapture)

eventType指定事件类型(不要加on)
handler是事件处理函数
useCapture是一个boolean用于指定是否在捕获阶段进行处理，一般设置为false与IE浏览器保持一致

例如：

var btn = document.getElementById('.btn');
btn.addEventListener(‘click’, showMessage, false);
btn.removeEventListener(‘click’, showMessage, false);

特性

可以在一个DOM元素上绑定多个事件处理器，各自并不会冲突

btn.addEventListener("click",showMessage1,false)
btn.addEventListener("click",showMessage2,false)

执行时机

当第三个参数(useCapture)设置为true就在捕获过程中执行，反之在冒泡过程中执行处理函数

<div id='div'>
    <p id='p'>
        <span id='span'>Click Me!</span>
    </p >
</div>

var div = document.getElementById('div');
var p = document.getElementById('p');

function onClickFn (event) {
    var tagName = event.currentTarget.tagName;
    var phase = event.eventPhase;
    console.log(tagName, phase);
}

div.addEventListener('click', onClickFn, false);
p.addEventListener('click', onClickFn, false);

上述使用了eventPhase，返回一个代表当前执行阶段的整数值。1为捕获阶段、2为事件对象触发阶段、3为冒泡阶段

P 3
DIV 3

可以看到，p和div都是在冒泡阶段响应了事件，由于冒泡的特性，裹在里层的p率先做出响应

IE事件模型

共有两个过程

事件处理阶段：事件到达目标元素, 触发目标元素的监听函数
事件冒泡阶段：事件从目标元素冒泡到document, 依次检查经过的节点是否绑定了事件监听函数，如果有则执行

事件绑定监听函数的方式如下:

attachEvent(eventType, handler)

事件移除监听函数的方式如下:

detachEvent(eventType, handler)

var btn = document.getElementById('.btn');
btn.attachEvent(‘onclick’, showMessage);
btn.detachEvent(‘onclick’, showMessage);

敲啊敲9527

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
12-事件模型(也就是一个先后触发顺序)

HTML文档、浏览器中发生的一种交互。使得具备互动性，加载、鼠标、自定义事件。由于DOM是一个树结构，意味着标签存在嵌套关系，当绑定事件的时候，当触发子节点的时候，一个顺序问题，概念-事件流三个阶段事件冒泡是一种从下往上的传播方式，由最具体的元素（触发节点）然后逐渐向上传播到最不具体的那个节点，也就是DOM然后，我们给button和它的父元素，加入点击事件点击按钮，输出如下点击事件首先在button元素上发生，然后逐级向上传播。
复制链接

扫一扫