浅析js中事件冒泡与事件捕获

2024-07-28 21:20:39

01-事件冒泡

1.1-事件冒泡介绍

本小节知识点：介绍什么是事件冒泡

事件冒泡：如果一个元素的事件被触发，那么他的所有父级元素的同名事件也会被依次触发

元素->父元素->body->html->document->window

事件冒泡一直存在，只不过以前我们没有给父级元素加同名事件

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件冒泡</title>
    <style>
        .parent {
            position: relative;

            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .son {
            position: absolute;

            left: 400px;
            top: 300px;

            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>

<body>
    <!-- 冒泡: bubble -->

    <div class="parent">
        <div class="son"></div>
    </div>

    <script>
        // 证明冒泡: 给父子添加同类型事件即可

        const parent = document.querySelector('.parent')
        const son = parent.firstElementChild

        // 给父子绑定点击事件
        parent.onclick = function () {
            console.log('parent')
        }

        // 点击parent元素： 输出parent， 点击son元素： 也输出parent
        // 1. 事件是所有元素都有的： 给不给事件， 都有
        // 2. 点击son触发了parent的点击事件： 事件冒泡发生

        // 所有元素都有事件， 包括顶级对象window
        window.onclick = function () {
            console.log('window')
        }

        // 事件链条： 目标元素-》上级-》上级-》body-》html-》document-》window
        // 事件冒泡： 大部分的时候没用（还有坏处）
    </script>
</body>

</html>

1.2-事件冒泡利用（事件委托）

本小节知识点：介绍事件冒泡的好处

事件冒泡好处：如果想给父元素的多个子元素添加事件，我们可以只需要给父元素添加事件即可，然后

通过获取事件源(e.target)就可以得知是哪一个子元素触发了这个事件

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件冒泡 - 应用 - 事件委托</title>
    <style>
        li {
            margin: 20px 0;
        }
    </style>
</head>

<body>
    <ul>
        <li>百里守约1</li>
        <li>百里守约2</li>
        <li>百里守约3</li>
    </ul>

    <script>
        // 需求: 给所有li增加鼠标的移入移出事件: 变色即可
        // document.querySelectorAll('li').forEach(function (li) {
        //     li.onmouseover = function () {
        //         this.style.backgroundColor = 'red'
        //     }

        //     li.onmouseout = function () {
        //         this.style.backgroundColor = ''
        //     }
        // })

        // 1. 代码的执行效率偏低: 需要给所有的li,一个一个的绑定事件
        // 2. 可扩展性弱: 新增一个li,将会无效
        // innerHTML: 所有都无效
        // document.querySelector('ul').innerHTML += '<li>innerHTML的li</li>'
        // 逻辑: 取出ul中的所有li(结构,不包含事件), 再放进去(字符串形式): 所有的事件全部丢失

        // document.createElement() + appendChild(): 新增的无效
        // let li = document.createElement('li')
        // li.innerHTML = 'creatElement创建的li'
        // document.querySelector('ul').appendChild(li)

        // 事件委托: 将子元素该绑定的事件(效果代码) 绑定到父元素身上
        document.querySelector('ul').onmouseover = function (e) {
            // 事件对象中: e.target 是触发事件的原始目标(最上面的孩子)
            console.log(e.target)

            // 如何区分目标元素是li还是ul呢? 节点: 节点三要素
            // nodeType: li和ul都是元素,   1
            // nodeValue: li和元素都是元素, null
            // nodeName: 是元素标签名字的大写: LI UL
            console.log(e.target.nodeName)
            if (e.target.nodeName === 'LI') {
                // 是目标元素
                e.target.style.backgroundColor = 'red'
            }
        }

        document.querySelector('ul').onmouseout = function (e) {
            if (e.target.nodeName === 'LI') {
                // 是目标元素
                e.target.style.backgroundColor = ''
            }
        }

        // 最大的优点: 事件绑定一次(性能极大提升)
        // 次要优点: 不论是innerHTMl的修改还是createElement的创建: 所有的li都有效
        // document.querySelector('ul').innerHTML += '<li>innerHTML的li</li>'
        // 正是因为有了事件委托: 以后不用再使用创建元素,直接使用innerHTML方便太多

        // let li = document.createElement('li')
        // li.innerHTML = 'creatElement创建的li'
        // document.querySelector('ul').appendChild(li)

        // 事件委托: 是事件冒泡唯一的价值(挺有用)
    </script>
</body>

</html>

1.3-事件冒泡影响与阻止事件冒泡

本小节知识点：介绍事件冒泡的影响

事件冒泡会导致需求冲突：例如我想要添加一个功能，弹出登录窗之后点击body空白区域让登陆窗消失
此时a标签弹出登录窗的点击事件会触发body的点击事件，导致登陆窗一出来就消失

解决方案：阻止事件冒泡（下一小节知识点）

本小节知识点：阻止事件冒泡

阻止事件冒泡：让同名事件不要在父元素中冒泡（触发）

 * 说人话：点击一个元素只会触发当前元素的事件，不会触发父元素的同名事件

语法：事件对象.stopPropagation() IE8及之前不支持

事件对象.cancelBubble = true IE8之前支持

注意：如果想要阻止事件冒泡，一定要在触发事件的函数中接收事件对象

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件冒泡 - 影响 - 阻止事件冒泡</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        a {
            text-decoration: none;
            display: block;

            width: 200px;
            margin: 20px auto;
        }

        .form {
            position: relative;

            width: 400px;
            height: 200px;
            margin: 0 auto;
            text-align: center;
            border: 1px solid #ccc;

            display: none;
        }

        .form span {
            display: block;
            position: absolute;
            right: -25px;
            top: -25px;

            width: 50px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            border: 1px solid #ccc;
            border-radius: 50%;
            background-color: #fff;
            cursor: pointer;

        }
    </style>
</head>

<body>
    <a href="javascript:;" rel="external nofollow" >点我显示登录框</a>

    <div class="form">
        <span>X</span>
        用户名: <input type="text" name="username"><br>
        密码: <input type="password" name="password"><br>
        <button>登录</button>
    </div>

    <script>
        // 事件冒泡: 子元素事件触发, 导致父元素相同事件被触发

        // 需求: 点击 链接 显示登录框, 点击任何空白地方, 都要隐藏登录框
        const a = document.querySelector('a')
        const form = document.querySelector('.form')
        const x = form.firstElementChild

        // 阻止冒泡: 阻止事件的传递: 事件对象e.stopPropagation()
        // 子元素如果不希望父元素触发子元素相同的事件: 在子元素的事件中,阻止传递

        // 1. 给a做点击事件: 显示div.form
        a.onclick = function (e) {
            console.log('a')
            form.style.display = 'block'

            console.log(e)
            // 阻止传递: 点击事件, 到a这里结束
            e.stopPropagation()
        }

        // 2. 点击空白隐藏div.form: 简单: 给document || window做点击事件
        document.onclick = function () {
            console.log('document')
            form.style.display = ''
        }

        // 3. 为了安全: 让整个formdiv都可以点击, 不会传递
        form.onclick = function (e) {
            e.stopPropagation()
        }

        // 4. 点击关闭
        x.onclick = function () {
            form.style.display = ''
        }

        // 总结
        // 实际开发中: 可能会出现父子出现相同类型的事件, 如果效果相反(a要显示div,document要隐藏div),一般会用到阻止事件传递: e.stopPropagation()
    </script>
</body>

</html>

02-事件捕获

1.1-事件捕获介绍

本小节知识点：事件捕获

1.事件冒泡：从触发事件元素，一级一级往上找父元素触发同名事件，如果有就触发
2.事件捕获：从最顶级的父元素一级一级往下找子元素触发同名事件，直到触发事件的元素为止

事件捕获与事件冒泡触发事件的顺序完全相反

3.事件捕获，只能通过addEventListener并且参数写true才是事件捕获

其他都是冒泡（不是通过addEventListener添加、addEventListener参数为false）

4.事件对象.stopPropagation() 除了可以阻止冒泡还可以阻止捕获
5.IE8及以前没有捕获！

1.2-事件三个阶段

本小节知识点：介绍事件的三个阶段

1.事件一共有三个阶段：事件的执行顺序

1–捕获阶段：
2–目标阶段：
3–冒泡阶段：

2.事件对象.eventPhase 可以获得触发这个事件时，到底是哪个阶段
3.先从最顶级往下一级一级捕获，然后到目标的捕获，目标的冒泡，再一级一级往上冒泡

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件捕获</title>
</head>

<body>
    <div class="box">我是小马哥</div>

    <script>
        // on事件: 全部都是冒泡事件

        window.onclick = function () {
            console.log('window的冒泡事件')
        }

        document.onclick = function () {
            console.log('document的冒泡事件')
        }

        const box = document.querySelector('.box')

        box.onclick = function () {
            console.log('box的冒泡事件')
        }

        // 捕获事件:只有一种方式 addEventListener('事件类型',回调函数,true)
        window.addEventListener('click', function () {
            // console.log('window的捕获事件')
        }, true)

        document.addEventListener('click', function () {
            console.log('document的捕获事件')
        }, true)

        // 事件捕获的唯一价值: 给事件目标做准备

        // 事件流: 先捕获  后目标  再冒泡
        // 目标阶段: 不区分捕获还是冒泡(哪个代码在前面,哪个先执行)
        // 最新的谷歌: 先捕获后冒泡
        // IE是按顺序(目标阶段)

        // box前面已经有点击冒泡
        box.addEventListener('click', function () {
            console.log('box的捕获事件')
        }, true)

        // e.stopPropagation() 组织事件传递： 如果在捕获阶段阻止: 导致js出bug
        window.addEventListener('click', function (e) {
            e.stopPropagation()
        }, true)

    </script>
</body>

</html>```

到此这篇关于浅析js中事件冒泡与事件捕获的文章就介绍到这了,更多相关js事件冒泡与事件捕获内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

JavaScript事件冒泡与事件捕获实例分析

本文实例讲述了JavaScript事件冒泡与事件捕获.分享给大家供大家参考,具体如下: 1.事件冒泡在一个对象上触发某类事件,如onclick事件等,在其祖先节点上也会依次触发该事件. <body onclick="alert('body')"> <div onclick="alert('div')"> <a href="" onclick=" rel="external nofollow&qu
js之事件冒泡和事件捕获详细介绍

(1)冒泡型事件:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发. IE 5.5: div -> body -> document IE 6.0: div -> body -> html -> document Mozilla 1.0: div -> body -> html -> document -> window (2)捕获型事件(event capturing):事件从最不精确的对象(document 对象)开
一篇文章让你彻底弄懂JS的事件冒泡和事件捕获

在学校,听老师讲解事件冒泡和事件捕获机制的时候跟听天书一样,只依稀记得IE使用的是事件冒泡,其他浏览器则是事件捕获.当时的我,把它当成IE浏览器兼容问题,所以没有深究(IE8以下版本的浏览器已基本退出市场).工作至今,虽然多次遇到该类问题,但均未深究,始终一知半解,遇到了全TM靠猜(选A不行就选B呗).今天闲来无事自己做了个demo,算是把这个问题彻底搞明白了. 先上结论:他们是描述事件触发时序问题的术语.事件捕获指的是从document到触发事件的那个节点,即自上而下的去触发事件.相反的,事件
js事件冒泡与事件捕获详解

(一)事件绑定 1.普通事件绑定给html添加一个以on开头的特定的属性(如onclick,onfocus); <button id="A" onclick="alert(this.id)">方式一</button> <button id="A" onclick="handler(this)">方式二</button> <script> function handl
javascript 中事件冒泡和事件捕获机制的详解

javascript 中事件冒泡和事件捕获机制的详解二者作用:描述事件触发时序问题事件捕获:从document到触发事件的那个节点,即自上而下的去触发事件---由外到内事件冒泡:自下而上的去触发事件---由内到外绑定事件方法的第三个参数,就是控制事件触发顺序是否为事件捕获 true,事件捕获:false,事件冒泡一般默认false,即事件冒泡 Jquery的e.stopPropagation会阻止冒泡,意思就是到DOM为止,祖先级的事件就不要触发了下面是我尝试的例子: <!DOCTY
JS中事件冒泡和事件捕获介绍

谈起JavaScript的事件,事件冒泡.事件捕获.阻止默认事件这三个话题,无论是面试还是在平时的工作中,都很难避免. 事件捕获阶段:事件从最上一级标签开始往下查找,直到捕获到事件目标(target). 事件冒泡阶段:事件从事件目标(target)开始,往上冒泡直到页面的最上一级标签. 1.冒泡事件: 事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发.通俗来讲就是,就是当设定了多个div的嵌套时:即建立了父子关系,当父div与子div共同加入了onclick事件
浅谈javascript中的事件冒泡和事件捕获

1.事件冒泡 IE 的事件流叫做事件冒泡(event bubbling),即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到较为不具体的节点(文档).以下面的HTML 页面为例: <!DOCTYPE html> <html> <head> <title>Event Bubbling Example</title> </head> <body> <div id="myDiv&q
javascript事件冒泡和事件捕获详解

事件冒泡和事件捕获分别由微软和网景公司提出,这两个概念都是为了解决页面中事件流(事件发生顺序)的问题. <div id="outer"> <p id="inner">Click me!</p> </div> 上面的代码当中一个div元素当中有一个p子元素,如果两个元素都有一个click的处理函数,那么我们怎么才能知道哪一个函数会首先被触发呢? 为了解决这个问题微软和网景提出了两种几乎完全相反的概念. 事件冒泡微软提出
JS中绑定事件顺序（事件冒泡与事件捕获区别）

在JS中,绑定的事件默认的执行时间是在冒泡阶段执行,而非在捕获阶段(重要),这也是为什么当父类和子类都绑定了某个事件,会先调用子类绑定的事件,后调用父类的事件.直接看下面实例 <!Doctype html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{margin:0;p
浅析js中事件冒泡与事件捕获

目录 01-事件冒泡 1.1-事件冒泡介绍 1.2-事件冒泡利用(事件委托) 1.3-事件冒泡影响与阻止事件冒泡 02-事件捕获 1.1-事件捕获介绍 1.2-事件三个阶段 01-事件冒泡 1.1-事件冒泡介绍本小节知识点:介绍什么是事件冒泡事件冒泡:如果一个元素的事件被触发,那么他的所有父级元素的同名事件也会被依次触发元素->父元素->body->html->document->window 事件冒泡一直存在,只不过以前我们没有给父级元素加同名事件 <!DO
JS html事件冒泡和事件捕获操作示例

本文实例讲述了JS html事件冒泡和事件捕获操作.分享给大家供大家参考,具体如下: 今天学习了事件冒泡和捕获,记录一下. 1.冒泡型事件:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发. 我一般用法就是理解为触发事件A, 会触发A的父亲,爷爷,爷爷的父亲...... 代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>
js事件冒泡、事件捕获和阻止默认事件详解

谈起JavaScript的事件,事件冒泡.事件捕获.阻止默认事件这三个话题,无论是面试还是在平时的工作中,都很难避免. 1.事件冒泡先来看一段代码: var $input = document.getElementsByTagName("input")[0]; var $div = document.getElementsByTagName("div")[0]; var $body = document.getElementsByTagName("bo
javaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序整理总结

抽空学习了下javascript和jquery的事件设计,收获颇大,总结此贴,和大家分享. (一)事件绑定的几种方式 javascript给DOM绑定事件处理函数总的来说有2种方式:在html文档中绑定.在js代码中绑定.下面的方式1.方式2属于在html中绑定事件,方式3.方式4和方式5属于在js代码中绑定事件,其中方法5是最推荐的做法. 方式1: HTML的DOM元素支持onclick.onblur等以on开头属性,我们可以直接在这些属性值中编写javascript代码.当点击div的时候,
基于事件冒泡、事件捕获和事件委托详解

事件冒泡.事件捕获和事件委托在javascript里,事件委托是很重要的一个东西,事件委托依靠的就是事件冒泡和捕获的机制,我先来解释一下事件冒泡和事件捕获: 事件冒泡会从当前触发的事件目标一级一级往上传递,依次触发,直到document为止. 事件捕获会从document开始触发,一级一级往下传递,依次触发,直到真正事件目标为止. 这么说是不是很抽象,其实就像我敲击了一下键盘,我在敲击键盘的同时,我是不是也敲击了这台电脑,我写个例子大家就明白了: <!DOCTYPE html> <ht