事件原理三阶段

捕获(由外向内)、目标、冒泡(由内向外)

事件冒泡(event bubbling),即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到较为不具体的节点(文档)。即子标签发生事件后,向父级发送该事件,一直追溯到document。如:点击一个嵌套在 body中的button,则该button的onclick事件也会传递给body、document中,触发他们的onclick里触发的函数。

案例

    <style>
div{
position: absolute;
left:0;
right:0;
top:0;
bottom:0;
}
.div0
{
width: 200px;
height: 200px;
background-color: skyblue;
margin: auto;
}
.div1{
width: 100px;
height: 100px;
background-color: yellowgreen;
margin: auto;
}
.div2{
width: 50px;
height: 50px;
background-color: orange;
margin: auto;
}
</style>
</head>
<body>
<div class="div0">
<div class="div1">
<div class="div2"></div>
</div>
</div>
<script> div0.addEventListener("click",clickHandler0);
div1.addEventListener("click",clickHandler1);
div2.addEventListener("click",clickHandler2); function clickHandler0(e){
console.log("点击div0")
} function clickHandler1(e){
console.log("点击div1")
} </script>

三阶段原理过程:

阻止事件冒泡

当对子元素添加了事件侦听后,执行的时候会触发父元素相同类型的事件,此时需要阻止事件冒泡。

早期IE是没有捕获阶段的,只有冒泡,cancelBubble为阻止冒泡。后来的stopPropagaiton,既有阻止冒泡的功能,也有阻止捕获的功能,但如果译为阻止传播,那么跟cancel就是两个东西了,所以还是叫做阻止冒泡。阻止事件冒泡(传播)的方法是:

  • e.stopPropagation();通用
  • e.cancelBubble=true;仅适用在IE8及以下
<script>

    div0.addEventListener("click",clickHandler0,true);//开启捕获时就执行
div1.addEventListener("click",clickHandler1);
div2.addEventListener("click",clickHandler2,true);//开启捕获时就执行 function clickHandler2(e){
console.log("点击div2")
// console.log(e);
// 停止冒泡,后面的就不会冒泡了
e.stopPropagation();
// 仅适用在IE8及以下
// e.cancelBubble=true; }
/script>

div0.addEventListener(事件类型,事件回调函数,是否捕获时执行);

事件类型 必须是字符串,可以设置为任意字符串,但是部分字符串是系统事件类型

事件回调函数 指向一个函数,当收到事件时执行该函数,如果没有收到不执行函数,写侦听事件时不执行函数

是否捕获时执行 默认值是false,在冒泡时执行,捕获时不执行,

点击div2发现执行顺序发生改变

事件委托

事件侦听添加(注册事件)占有内存的,尽量减少事件侦听的数量,将子元素的事件委托给父元素来执行,叫做事件委托。

当删除对象时,一定要将对象上的侦听事件移除,否则会造成内存泄露。

应用于:在多个元素进行侦听事件中,如果这些元素有容器嵌套关系,就需要考虑阻止冒泡。

当多个元素需要侦听事件时,可以给这些元素的父容器增加事件,达到侦听所有元素,即是事件委托效果。

案例:点击 li ,让其子元素 ul 切换显示。

<body>
<ul id="skils">
<li>H5
<ul>
<li>JS
<ul>
<li>原生</li>
<li>框架
<ul>
<li>VUEJs</li>
<li>ReactJs</li>
<li>AngularJs</li>
</ul>
</li>
<li>App</li>
<li>小程序</li>
<li>网页开发</li>
</ul>
</li>
</ul>
</li>
<li>JAVA</li>
<li>PHP</li>
<li>LINUX</li>
<li>PYTHON</li>
</ul>
<script>
//把子元素的侦听事件全部委托给最外层的父元素,叫做事件委托 init(); function init(){
var skils = document.getElementById("skils");
//给父元素添加侦听事件
skils.addEventListener("click",clickHandler);
} function clickHandler(e){
//e.target 事件的目标 真实点击到最终的目标对象
//阻止冒泡,到此就结束,不再冒泡
e.stopPropagation();
//判断点击目标的节点名是不是“LI” ,不是就不执行
if(e.target.nodeName !== "LI") return;
//判断点击目标有没有子元素
if(e.target.firstElementChild){
// 设置开关,显示和隐藏ul
// 第一次默认是隐藏
if(!e.target.bool){
e.target.firstElementChild.style.display = "none";
}else{
e.target.firstElementChild.style.display = "block";
}
//点击完后将e.target.bool 取反,进行显示操作
e.target.bool = !e.target.bool;
}
}
</script>
</body>

扩展:

  • e.currentTarget 是事件侦听事件对象(什么对象执行addEventListener函数就是谁)
  • e.target 事件的目标对象 真实点击的最终目标对象
  • e.srcElement 事件的目标对象,兼容IE
  • 事件函数中this默认等同于e.currentTarget,都是事件侦听的对象

Js 事件原理与事件委托的更多相关文章

  1. js的事件的三个阶段,事件委托的原理

    DOM2级事件规定的事件流的三个阶段:捕获,目标,冒泡(IE8以及更早版本不支持DOM事件流); 事件流: IE:IE事件流是事件冒泡流  Netscape事件流是事件捕获流 IE事件流 叫做事件冒泡 ...

  2. js事件冒泡和事件委托

    js事件冒泡 js所谓的事件冒泡就是子级元素的某个事件被触发,它的上级元素的该事件也被递归执行 html: <ul class="clearfix" data-type=&q ...

  3. JS性能优化 之 事件委托

    面试中2次被问到过这个知识点,实际开发中,应用事件委托也比较常见.JS中事件委托的实现主要依赖于 事件冒泡 .那什么是事件冒泡?就是事件从最深的节点开始,然后逐步向上传播事件,举个例子:页面上有这么一 ...

  4. js委托事件和代理事件

    转载出处:https://www.cnblogs.com/liugang-vip/p/5616484.html js中的事件委托或是事件代理详解 起因: 1.这是前端面试的经典题型,要去找工作的小伙伴 ...

  5. JS中的事件、事件冒泡和事件捕获、事件委托

    https://www.cnblogs.com/diver-blogs/p/5649270.html https://www.cnblogs.com/Chen-XiaoJun/p/6210987.ht ...

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

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

  7. [已转移]js事件流之事件冒泡的应用----事件委托

    该文章已转移到博客:https://cynthia0329.github.io/ 什么是事件委托? 它还有一个名字叫事件代理. JavaScript高级程序设计上讲: 事件委托就是利用事件冒泡,只指定 ...

  8. js:事件(注册、解绑、DOM事件流、事件对象、事件委托)

    1.注册事件 (1)传统方式注册事件 <body> <button id="b1">请点击</button> <script> va ...

  9. [JS]笔记14之事件委托

    -->什么是事件委托-->事件委托原理-->事件委托优点-->事件源 / 目标源 一.什么是事件委托 通俗的讲,onclick,onmouseover,onmouseout等这 ...

随机推荐

  1. 大数据安装之Kafka(用于实时处理的消息队列)

    一.安装部署kafka 1.集群规划 hadoop102                                 hadoop103                          hado ...

  2. Log4j模板

    log4j.rootLogger=DEBUG, A1,A2 log4j.appender.A1.MaxFileSize=1kb #10个备份 log4j.appender.A1.MaxBackupIn ...

  3. Nuget多项目批量打包上传服务器的简明教程

    本篇不会介绍Nuget是什么,如何打包上传Nuget包,怎么搭建私有Nuget服务器.这些问题园子里都有相应的文章分享,这里不做过多阐述.另外本文假设你已经下载了Nuget.exe,并且已经设置好了环 ...

  4. c++ 的vector sort遇到栈错误

    在做pat乙级1082 射击比赛时 遇到了sort 段错误. 题目链接:https://www.patest.cn/contests/pat-b-practise/1082 感觉写的没啥毛病 但就是段 ...

  5. 微服务交付至kubernetes流程

    目录 1.微服务简介 2.K8s部署微服务考虑的问题 3.项目迁移到k8s流程 1.微服务简介 微服务优点 服务组件化 每个服务独立开发.部署,有效避免一个服务的修改引起整个系统重新部署 技术栈灵活 ...

  6. CVPR 2019细粒度图像分类竞赛中国团队DeepBlueAI获冠军 | 技术干货分享

    [导读]CVPR 2019细粒度图像分类workshop的挑战赛公布了最终结果:中国团队DeepBlueAI获得冠军.本文带来冠军团队解决方案的技术分享. 近日,在Kaggle上举办的CVPR 201 ...

  7. Windows下命令行MySQL安装

    通过zip压缩包文件直接安装 1.下载链接 https://dev.mysql.com/downloads/mysql/ 下载好后解压移动文件夹 2.配环境变量 path路径追加 3.创建初始化文件 ...

  8. ArcGIS Engine的安装

    1.双击安装文件“setup.exe”. 2.点击“Next”. 3.选择“ I accept the license agreement”,点击“Next”. 4.选择“Complete”,点击“N ...

  9. 磅日波浪分析4H 20190927

    磅日的短线调整预计在132结束 目前已显现出ABC调整末端. 未来预计开启第五浪升势 破前期反弹高点.

  10. LeetCode(一) jump game

    一. 1. #include<iostream> #include<cmath> using namespace std; bool CanJump(int n[],int n ...