事件原理三阶段

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

事件冒泡(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. IntelliJ IDEA 2018.1.4 x64安装创建maven项目等

    Intellij IDEA 一:介绍 Jetbrains公司https://www.jetbrains.com/idea/ 1.1版本 Ultimate最终[收费] 网络,移动和企业开发 Web, m ...

  2. 信息收集工具-dimtry

    GitHub地址: kali下也是自带的: -s以及-e 参数需要用到Google搜索 1.获取whois主机ip信息 2.扫描端口,根据banner信息判断服务

  3. 动态规划-Minimum Distance to Type a Word Using Two Fingers

    2020-01-12 18:28:13 问题描述: 问题求解: 本题还是非常困难的,至少我在看到这个题目的时候是没有想到怎么解决的.我当时联想到的题目是那条grid走两遍的题目,那条题目也很麻烦,使用 ...

  4. BIT-Count of Range Sum

    2019-12-17 18:56:56 问题描述: 问题求解: 本题个人感觉还是很有难度的,主要的难点在于如何将题目转化为bit计数问题. 首先构建一个presum数组,这个没有问题. 需要对于任意一 ...

  5. 使用IDEA操作Hbase API 报错：org.apache.hadoop.hbase.client.RetriesExhaustedException的解决方法:

     使用IDEA操作Hbase API 报错:org.apache.hadoop.hbase.client.RetriesExhaustedException的解决方法: 1.错误详情: Excepti ...

  6. PHP Curl进行Post时指定 multipart/form-data 或 application/x-www-form-urlencoded 的方法

    PHP Curl进行Post时指定 multipart/form-data 或 application/x-www-form-urlencoded 的方法 先看一段典型的CURL POST的代码: $ ...

  7. POJ - 3468 线段树单点查询，单点修改区间查询，区间修改模板（求和）

    题意: 给定一个数字n,表示这段区间的总长度.然后输入n个数,然后输入q,然后输入a,b,表示查询a,b,区间和,或者输入c 再输入三个数字a,b,c,更改a,b区间为c 思路: 线段树首先就是递归建 ...

  8. ArcGIS中影像图去黑边

    通常情况下有些影像图的背景会显示黑色,所以需要将影像图的格式转换一下,将黑色背景转换为透明色.具体去除河边的步骤如下: 1.在catalog中,选中要转换的影像图: 2.右键——导出——将栅格导出为不 ...

  9. Java方法调用数组，是否改变原数组元素的总结

    Java方法调用数组,是否改变原数组元素的总结 //个人理解, 欢迎吐槽 注意String是引用型变量, 我的理解也就是指向型, 指向一个数据或变量, 画图理解最容易, string 指向的 数据的值 ...

  10. centos7中提升用户权限

    提升用户权限我看网上资源有两种方法,一种是修改/etc/sudoers/文件将新增的用户权限提升为和root一样的权限,这种方法不知道怎么回事我没用应用成功,这里我介绍第二种方法,第二种方法是更改/e ...