JavaScript DOM事件流、事件对象

最新推荐文章于 2024-09-20 11:38:47 发布

MDR_0820

最新推荐文章于 2024-09-20 11:38:47 发布

阅读量128

点赞数

分类专栏： JavaScript 文章标签： 1024程序员节 javascript 开发语言前端 ecmascript

本文链接：https://blog.csdn.net/MDR_0820/article/details/120932337

版权

JavaScript 专栏收录该内容

49 篇文章 0 订阅

订阅专栏

DOM 事件流

事件流描述的的是页面中接收事件的顺序
事件发生时会在元素节点之间按照特定的顺序传播这个传播过程就是 DOM事件流

DOM 事件流分为三个阶段

1.捕获阶段
2.当前目标阶段
3 .冒泡阶段

比如给div 注册点击事件
在这里插入图片描述

事件冒泡：IE最早提出，事件开始时由最具体的元素接收，然后逐级向上传播到DOM最顶层节点的过程
事件捕获：网景最早提出，由DOM最顶层节点开始，然后逐级向下传播到最具体的元素接收的过程

注意

js 代码中只能执行捕获或者冒泡其中的一个阶段
onclick 和 attachEvent 只能得到冒泡阶段
addEventListener(type listener[ ,useCapture]) 第三个参数如果是true 表示在事件捕获阶段调用事件处理程序 如果是false（不写默认就是false） 表示在事件冒泡阶段调用事件处理程序
实际开发中我们很少使用事件捕获我们更关注事件冒泡
有些事情是没有冒泡的比如：onblur、onfocus、onmouseenter、onmouseleave
事件冒泡有时候会带来麻烦有时候又会帮助很巧秒的某些事情

捕获阶段

先弹出 father 在弹出span

<body>
    <div class="father">
        <span>span</span>
    </div>
    <script>
        // dom 事件流 三个阶段
        // 1 js 代码中只能执行捕获或者冒泡其中的一个阶段
        // 2 onclick 和 attachEvent 只能得到冒泡阶段
        // 3  捕获阶段 如果 addEventListener 第三个参数是 true 那么则处于捕获阶段 
        //    document ->html ->body ->father ->span
         var span = document.querySelector('span')
         span.addEventListener ('click',function(){
             alert(123)
         }, true)
         var father = document.querySelector('.father')
         father.addEventListener ('click',function(){  
             alert('father')
         }, true)   // 捕获会先从 father 开始 再到 span

在这里插入图片描述

冒泡阶段

先弹出 span 在弹出father

 var span = document.querySelector('span')
        span.addEventListener ('click',function(){
            alert('span')
        }, false)           // 捕获会先从 span 开始 再到 father
        var father = document.querySelector('.father')
        father.addEventListener ('click',function(){  
            alert('father')
        })

在这里插入图片描述

事件对象

事件对象：event对象代表事件的状态，比如键盘按键的状态，鼠标的位置，鼠标按钮的状态
简单理解：事件发生后跟事件相关的一系列信息数据的集合都放到这个对象里面这个对象是事件对象
它有很多属性和方法
事件对象我们可以自己命名比如 event ,evt ,e
e 就是一个事件对象写到函数的小括号里边当形参来看
事件对象只有有了事件才会存在它是系统给我们自动创建的不需要我们传递参数

 <div>123</div>
    <script>
          //事件对象
        var div = document.querySelector('div')
        // div.onclick = function(e){
        //     console.log(e);
        // }
        div.addEventListener('click',function(e){
            console.log(e);
        })
       // e 就是一个事件对象 写到函数的小括号里边 当形参来看
       // 事件对象 只有有了事件才会存在 它是系统给我们自动创建的 不需要我们传递参数
       
    </script>

在这里插入图片描述

事件对象的常见属性和方法

在这里插入图片描述

<body>
    <div>123</div>
    <ul>
        <li>68</li>
        <li>86</li>
    </ul>
    <script>
        //常见事件对象的属性和方法
        // 1.e.target 返回的是触发事件的对象（元素）
        var div = document.querySelector('div');
        div.addEventListener('click',function(e){
            console.log(this);
            console.log(e.target);
        })
        var ul = document.querySelector('ul');
        ul.addEventListener('click',function(e){
            //我们给ul 绑定了事件 那么 this就指向 ul
            console.log(this);
            // e.target 指向我们点击的那个对象   点击li e.target 就指li
            console.log(e.target);
        })
    </script>
</body>

this 和e.target 的区别
e.target 返回的是触发事件的对象（元素） this 返回的是绑定事件的对象（元素）
e.target 指向我们点击的那个对象点击li e.target 就指li
this 是哪个元素绑定了点击事件那么就返回这个元素

阻止默认事件 e.preventDefault()

  // 阻止 默认行为（事件）让连接不跳转或者让提交按钮不提交 等
        var a = document.querySelector('a')
        a.addEventListener('click',function(e){
         e.preventDefault()  // DOM  标准写法
        })

阻止冒泡

阻止冒泡 dom 推荐标准 stopPropagation()

<body>
    <div class="father">father 
        <div class="son">son</div>
    </div>
    <script>
        // 阻止冒泡 dom  推荐标准 stopPropagation()
        var father =document.querySelector('.father')
        father.addEventListener('click',function(e){
          alert('father')         
        } )
        var son =document.querySelector('.son')
        son.addEventListener('click',function(e){
          alert('son')  
          e.stopPropagation()        //stop 停止   Propagation传播
          e.cancelBubble = ture  // 非标准 cancel 取消 bubble泡泡
        })

    </script>
</body>

事件委托

事件委托也称事件代理

事件委托的原理

不是每个子节点单独设置监听器而是事件监听器设置在其父级上然后利用冒泡原理影响设置每个子节点

事件委托的作用

我们只操作一次dom 提高了程序的性能

body>
    <ul>
        <li >1</li>
        <li>12</li>
        <li>123</li>
        <li>1234</li>
        <li>12345</li>
    </ul>
    <script>
        var ul = document.querySelector('ul')
        ul.addEventListener('click',function(e){
            alert('111')
            e.target.style.backgroundColor = 'red';  //设置点击当前元素 设置背景颜色
        })
    </script>