DOM事件流

敏小静

于 2020-11-01 14:58:32 发布

阅读量237

点赞数

分类专栏： JavaScript 文章标签： dom js javascript 事件处理机制点击事件

本文链接：https://blog.csdn.net/qq_31392495/article/details/109426398

版权

JavaScript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

“DOM2级事件”规定的事件流包括三个阶段：事件捕获阶段、目标阶段和事件冒泡阶段。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
   <div id="mj">click me</div>
</body>
</html>

当点击div元素时，事件流的流程图如下：
在这里插入图片描述
在DOM事件流中，实际目标在捕获阶段是不会接收事件的，这意味着在捕获阶段是由doucment–>html–>body就停止了，然后进入下一个目标阶段，于是，事件在div上发生了，并在事件处理中形成了冒泡阶段，事件又回传至文档。
在这里插入图片描述
事件处理程序中的性能优化：

事件委托
事件委托是利用了冒泡阶段，给元素的父级绑定事件，事件目标是被单击的子级，然后冒泡至父级执行相应的事件。
优点：
1. 节省内存
2. 动态绑定事件（动态添加子级时，无需再绑定事件）
移除事件处理程序
在页面卸载之前，通过onunload事件处理程序移除所有的事件处理程序。

   <div id="mj">
    <input type="button" value="click me" id="btn"/>
    </div>
    <script>
    var btn = doucment.getElementById("btn");
    btn.onclick - function(){
    //先执行某些操作
    btn.onclick = null; //移除事件处理程序
    doucment.getElementById("mj").innerHTML = 'Processing...';//移除innerHTML,那么该元素绑定的事件也可能被垃圾回收。
    }
    </script>

敏小静

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM事件流

“DOM2级事件”规定的事件流包括三个阶段：事件捕获阶段、目标阶段和事件冒泡阶段。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <div id="mj">click me</div></body>
复制链接

扫一扫

专栏目录