DOM事件（下）

野性酷女 2023-09-27 19:46 106阅读 0赞

#### [事件执行机制][Link 1] ####

●今天来聊一聊事件的执行机制  
●什么是事件的执行机制呢？  
○思考一个问题？  
○当一个大盒子嵌套一个小盒子的时候，并且两个盒子都有点击事件  
○你点击里面的小盒子，外面的大盒子上的点击事件要不要执行

![b076fd0c00d12bd8449caf0fd96043c8.png][]

#### [事件的传播（事件流）][Link 2] ####

●历史：  
○JS事件流最早要从IE和网景公司的浏览器大战说起，IE提出的是冒泡流，而网景提出的是捕获流，后来在W3C组织的统一之下，JS支持了冒泡流和捕获流，但是目前低版本的IE浏览器还是只能支持冒泡流(IE6,IE7,IE8均只支持冒泡流)，所以为了能够兼容更多的浏览器，建议大家使用冒泡流  
●就像上面那个图片一样，我们点击在红色盒子身上的同时，也是点击在了粉色盒子上  
●这个是既定事实，那么两个盒子的点击事件都会触发  
●这个就叫做 事件的传播也叫事件流  
●注意：时间传播的是事件行为  
○当元素触发一个事件的时候，其父元素也会触发相同的事件，父元素的父元素也会触发相同的事件  
○就像上面的图片一样  
○点击在红色盒子上的时候，会触发红色盒子的点击事件  
○也是点击在了粉色的盒子上，也会触发粉色盒子的点击事件  
○也是点击在了 body 上，也会触发 body 的点击事件  
○也是点击在了 html 上，也会触发 html 的点击事件  
○也是点击在了 document 上，也会触发 document 的点击事件  
○也是点击在了 window 上，也会触发 window 的点击事件  
○也就是说，页面上任何一个元素触发事件，都会一层一层最终导致 window 的相同事件触发，前提是各层级元素得有注册相同的事件，不然不会触发  
●在事件传播的过程中，有一些注意的点：  
○只会传播同类型事件，也就是说事件类型要一样  
○只会从点击元素开始按照 html 的结构逐层向上元素的事件会被触发，也就是说要有结构上的父子级关系  
○内部元素不管有没有该事件，只要上层元素有该事件，那么上层元素的事件就会被触发  
●到现在，我们已经了解了事件的传播，我们再来思考一个问题  
○事件确实会从自己开始，到 window 的所有相同事件都会触发  
○是因为我们点在自己身上，也确实逐层的点在了直至 window 的每一个元素身上  
○但是到底是先点在自己身上，还是先点在了 window 身上呢  
○先点在自己身上，就是先执行自己的事件处理函数，逐层向上最后执行 window 的事件处理函数  
○反之，则是先执行 window 的事件处理函数，逐层向下最后执行自己身上的事件处理函数  
●事件传播（事件流）分为三个阶段：事件捕获阶段、时间目标阶段、事件冒泡阶段

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            
            .outer {
                width: 500px;
                height: 500px;
                background-color: pink;
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                margin: auto;
            }
            
            .center {
                width: 300px;
                height: 300px;
                background-color: skyblue;
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                margin: auto;
            }
            
            .inner {
                width: 100px;
                height: 100px;
                background-color: orange;
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                margin: auto;
            }
        </style>
    </head>
    
    <body>
    
        <div class="outer">
            <div class="center">
                <div class="inner"></div>
            </div>
        </div>
    
        <script>
            // 获取元素
            var outer = document.querySelector('.outer')
            var center = document.querySelector('.center')
            var inner = document.querySelector('.inner')
    
            inner.onclick = function() {
                console.log('inner')
            }
    
            center.onclick = function() {
                console.log('center')
            }
    
            outer.onclick = function() {
                console.log('outer')
            }
    
            document.body.onclick = function() {
                console.log('body')
            }
    
            document.documentElement.onclick = function() {
                console.log('html')
            }
    
            document.onclick = function() {
                console.log('document')
            }
    
            window.onclick = function() {
                console.log('window')
            }
        </script>
    </body>
    
    </html>
    
    
    复制代码

#### [捕获、目标、冒泡][Link 3] ####

●我们刚才聊过了，每一个事件，都是有可能从自己到 window ，有可能要执行多个同类型事件  
●那么这个执行的顺序就有一些说法了

#### [捕获阶段][Link 4] ####

●就是从 window 的事件处理函数开始，依次向内，直到事件 目标 的事件处理函数执行  
●也就是从上向下的执行事件处理函数

#### [目标阶段][Link 5] ####

●你是点击在哪个元素身上了，那么这个事件的 目标 就是对应的该元素

#### [冒泡阶段][Link 6] ####

●就是从事件 目标 的事件处理函数开始，依次向外，直到 window 的\#\#\# 事件处理函数触发  
●也就是从下向上的执行事件处理函数

![65c013a185a5c7fa0571e68b334bb0c2.png][]

#### [如何获取事件目标][Link 7] ####

●在事件对象内有一个固定的信息表示本次事件的事件目标  
●标准浏览器: 事件对象.target  
●IE 低版本: 事件对象.srcElement  
●兼容: 我们自己定义一个变量来兼容  
●var target = e.target || e.srcElement

#### [如何在捕获阶段执行事件][Link 8] ####

●DOM 0级 事件绑定没有办法修改  
●DOM 2级 事件绑定才可以修改事件的执行阶段  
●通过 addEventListener() 的第三个参数来决定  
○默认是 false, 表示冒泡阶段  
○选填是 true, 表示捕获阶段

#### [冒泡和捕获的区别][Link 9] ####

●就是在事件的传播中，多个同类型事件处理函数的执行顺序不同  
●在 IE 低版本内只能按照冒泡的顺序来执行  
●在标准浏览器下, 事件默认是在冒泡阶段执行  
●但是可以选择在捕获阶段执行

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
      <style>
        * {
          margin: 0;
          padding: 0;
        }
    
        .outer {
          width: 500px;
          height: 500px;
          background-color: pink;
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          margin: auto;
        }
    
        .center {
          width: 300px;
          height: 300px;
          background-color: skyblue;
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          margin: auto;
        }
    
        .inner {
          width: 100px;
          height: 100px;
          background-color: orange;
          position: absolute;
          top: 0;
          left: 600px;
          right: 0;
          bottom: 0;
          margin: auto;
        }
    
        p {
          width: 100px;
          height: 100px;
          background-color: purple;
          position: absolute;
          left: 600px;
          top: 500px;
        }
      </style>
    </head>
    <body>
    
      <div class="outer">
        <div class="center">
          <div class="inner"></div>
        </div>
      </div>
    
      <p></p>
    
      <script>
       // 冒泡阶段执行
        // 只要有 click 行为发生在 inner 身上就会触发对应的事件处理函数
        document.querySelector('.inner').addEventListener('click', function () { console.log('inner') }, false)
    
        document.querySelector('.center').addEventListener('click', function () { console.log('center') }, false)
        document.querySelector('.outer').addEventListener('click', function () { console.log('outer') }, true)
        document.body.addEventListener('click', function () { console.log('body') }, false)
        document.documentElement.addEventListener('click', function () { console.log('html') }, false)
        document.addEventListener('click', function () { console.log('document') }, false)
        window.addEventListener('click', function () { console.log('window') }, false)
    
    // 捕获阶段执行
        document.querySelector('.inner').addEventListener('click', function () { console.log('inner') }, false)
        document.querySelector('.center').addEventListener('click', function () { console.log('center') }, false)
        document.querySelector('.outer').addEventListener('click', function () { console.log('outer') }, false)
        document.body.addEventListener('click', function () { console.log('body') }, false)
        document.documentElement.addEventListener('click', function () { console.log('html') }, false)
        document.addEventListener('click', function () { console.log('document') }, false)
        window.addEventListener('click', function () { console.log('window') }, false)
      </script>
    </body>
    </html>
    
    
    
    复制代码

#### [阻止事件传播和默认行为][Link 10] ####

[阻止事件传播(捕获和冒泡)][Link 11]

●在有的情况下我们不需要事件的传播，就是实现自己的功能就好，这就需要阻止事件的传播

标准浏览器  
●语法：事件对象.stopPropagtion()  
●作用: 事件不管是 冒泡机制 还是 捕获机制 到自己位置, 不在继续传播了

IE低版本浏览器  
●语法：时间对象.cancelBubble = ture  
●作用: 取消事件的冒泡

兼容写法  
●这里的兼容不能在使用逻辑运算符||，会报错  
●这里可以用try \{\} catch() \{\} 语法  
○首先执行 try 后面的 \{\} 内部的代码  
○如果代码没有报错, 那么 catch 就不执行了  
○如果代码报错了, 那么执行 catch 内部的代码

try {
          // 当这里的代码报错的时候, 不会在控制台显示
          // 也不会阻断程序的继续执行
          // 而是把错误信息给到 err 参数
          // 继续去执行 catch 内的代码
          console.log(abc)
        } catch(err) {
          console.log('try 里面的代码报错了')
          console.log(err)
        }
    
    
    复制代码

#### [阻止默认行为][Link 12] ####

●默认行为，就是不用我们注册，它自己就存在的事情  
○比如我们点击鼠标右键的时候，会自动弹出一个菜单  
○比如我们点击 a 标签的时候，我们不需要注册点击事件，他自己就会跳转页面  
○还有form表单就有自动提交功能  
○...  
●这些不需要我们注册就能实现的事情，我们叫做 默认事件也叫默认行为  
●有的时候，我们不希望浏览器执行默认事件  
○比如我给 a 标签绑定了一个点击事件，我点击你的时候希望你能告诉我你的地址是什么  
○而不是直接跳转链接  
○那么我们就要把 a 标签原先的默认事件阻止，不让他执行默认事件  
●我们有两个方法来阻止默认事件

标准浏览器  
●语法：事件对象.preventDefault()  
IE低版本浏览器  
●语法：事件对象.returnValue = false

兼容写法  
●这里的兼容不能在使用逻辑运算符 ||，会报错  
●这里可以用try \{\} catch() \{\} 语法  
○首先执行 try 后面的 \{\} 内部的代码  
○如果代码没有报错, 那么 catch 就不执行了  
○如果代码报错了, 那么执行 catch 内部的代码

通用写法  
●直接书写 return false  
○这个代码必须写在最后一行  
○必须保证前面的代码百分之一百没有错误

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    
    <body>
    
        <a href="https://www.jd.com">你好</a>
    
        <script>
            var a = document.getElementsByTagName('a')[0]
    
            a.onclick = function(e) {
    
                // 处理事件对象兼容
                e = e || window.event
    
                // 兼容
                try {
                    e.preventDefault()
                } catch (err) {
                    e.returnValue = false
                }
    
                console.log('hello world')
    
                // 通用的方式
                // return false
            }
        </script>
    </body>
    
    </html>
    
    
    复制代码

#### [事件委托][Link 13] ####

●就是把我要做的事情委托给别人来做  
●因为我们的冒泡机制，点击子元素的时候，也会同步触发父元素的相同事件  
●所以我们就可以把子元素的事件委托给父元素来做  
●给多个元素添加相同的事件，可以把这个事件添加给上级元素。原理就的事件冒泡  
事件触发  
●点击子元素的时候，不管子元素有没有点击事件，只要父元素有点击事件，那么就可以触发父元素的点击事件

<body>
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
      </ul>
      <script>
          var oUl = docuemnt.querySelector('ul')
        
        oUl.addEventListener('click', function (e) {
          console.log('我是 ul 的点击事件，我被触发了')
        })
      </script>
    </body>
    
    
    复制代码

●像上面一段代码，当你点击 ul 的时候肯定会触发  
●但是当你点击 li 的时候，其实也会触发

#### [target][] ####

●target 这个属性是事件对象里面的属性，表示你点击的目标  
●当你触发点击事件的时候，你点击在哪个元素上，target 就是哪个元素  
●这个 target 也不兼容，在 IE 下要使用 srcElement

●上面的代码，当你点击 ul 的时候，target 就是 ul  
●当你点击在 li 上面的时候，target 就是 li

#### [委托][Link 14] ####

●这个时候，当我们点击 li 的时候，也可以触发 ul 的点事件  
●并且在事件内不，我们也可以拿到你点击的到底是 ul 还是 li  
●这个时候，我们就可以把 li 的事件委托给 ul 来做

<body>
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
      </ul>
      <script>
          var oUl = docuemnt.querySelector('ul')
        
        oUl.addEventListener('click', function (e) {
          e = e || window.event
          var target = e.target || e.srcElement
         
          // 判断你点击的是 li
          if (target.nodeName.toUpperCase === 'LI') {
              // 确定点击的是 li
            // 因为当你点击在 ul 上面的时候，nodeName 应该是 'UL'
            // 去做点击 li 的时候该做的事情了
            console.log('我是 li，我被点击了')
          }
        })
      </script>
    </body>
    复制代码

●上面的代码，我们就可以把 li 要做的事情委托给 ul 来做

#### [总结][Link 15] ####

●为什么要用事件委托  
○我页面上本身没有 li  
○我通过代码添加了一些 li  
○添加进来的 li 是没有点击事件的  
○我每次动态的操作完 li 以后都要从新给 li 绑定一次点击事件  
○比较麻烦  
○这个时候只要委托给 ul 就可以了  
○因为新加进来的 li 也是 ul 的子元素，点击的时候也可以触发 ul 的点击事件  
●事件委托的书写  
○元素的事件只能委托给结构父级或者再结构父级的同样的事件上  
○li 的点击事件，就不能委托给 ul 的鼠标移入事件  
○li 的点击事件，只能委托给 ul 或者在高父级的点击事件上

[Link 1]: http://tuwen.1000phone.net/details?id=NjE4Mw==#%E4%BA%8B%E4%BB%B6%E6%89%A7%E8%A1%8C%E6%9C%BA%E5%88%B6
[b076fd0c00d12bd8449caf0fd96043c8.png]: https://img-blog.csdnimg.cn/img_convert/b076fd0c00d12bd8449caf0fd96043c8.png
[Link 2]: http://tuwen.1000phone.net/details?id=NjE4Mw==#%E4%BA%8B%E4%BB%B6%E7%9A%84%E4%BC%A0%E6%92%AD%EF%BC%88%E4%BA%8B%E4%BB%B6%E6%B5%81%EF%BC%89
[Link 3]: http://tuwen.1000phone.net/details?id=NjE4Mw==#%E6%8D%95%E8%8E%B7%E3%80%81%E7%9B%AE%E6%A0%87%E3%80%81%E5%86%92%E6%B3%A1
[Link 4]: http://tuwen.1000phone.net/details?id=NjE4Mw==#%E6%8D%95%E8%8E%B7%E9%98%B6%E6%AE%B5
[Link 5]: http://tuwen.1000phone.net/details?id=NjE4Mw==#%E7%9B%AE%E6%A0%87%E9%98%B6%E6%AE%B5
[Link 6]: http://tuwen.1000phone.net/details?id=NjE4Mw==#%E5%86%92%E6%B3%A1%E9%98%B6%E6%AE%B5
[65c013a185a5c7fa0571e68b334bb0c2.png]: https://img-blog.csdnimg.cn/img_convert/65c013a185a5c7fa0571e68b334bb0c2.png
[Link 7]: http://tuwen.1000phone.net/details?id=NjE4Mw==#%E5%A6%82%E4%BD%95%E8%8E%B7%E5%8F%96%E4%BA%8B%E4%BB%B6%E7%9B%AE%E6%A0%87
[Link 8]: http://tuwen.1000phone.net/details?id=NjE4Mw==#%E5%A6%82%E4%BD%95%E5%9C%A8%E6%8D%95%E8%8E%B7%E9%98%B6%E6%AE%B5%E6%89%A7%E8%A1%8C%E4%BA%8B%E4%BB%B6
[Link 9]: http://tuwen.1000phone.net/details?id=NjE4Mw==#%E5%86%92%E6%B3%A1%E5%92%8C%E6%8D%95%E8%8E%B7%E7%9A%84%E5%8C%BA%E5%88%AB
[Link 10]: http://tuwen.1000phone.net/details?id=NjE4Mw==#%E9%98%BB%E6%AD%A2%E4%BA%8B%E4%BB%B6%E4%BC%A0%E6%92%AD%E5%92%8C%E9%BB%98%E8%AE%A4%E8%A1%8C%E4%B8%BA
[Link 11]: http://tuwen.1000phone.net/details?id=NjE4Mw==#%E9%98%BB%E6%AD%A2%E4%BA%8B%E4%BB%B6%E4%BC%A0%E6%92%AD%28%E6%8D%95%E8%8E%B7%E5%92%8C%E5%86%92%E6%B3%A1%29
[Link 12]: http://tuwen.1000phone.net/details?id=NjE4Mw==#%E9%98%BB%E6%AD%A2%E9%BB%98%E8%AE%A4%E8%A1%8C%E4%B8%BA
[Link 13]: http://tuwen.1000phone.net/details?id=NjE4Mw==#%E4%BA%8B%E4%BB%B6%E5%A7%94%E6%89%98
[target]: http://tuwen.1000phone.net/details?id=NjE4Mw==#target
[Link 14]: http://tuwen.1000phone.net/details?id=NjE4Mw==#%E5%A7%94%E6%89%98
[Link 15]: http://tuwen.1000phone.net/details?id=NjE4Mw==#%E6%80%BB%E7%BB%93