JS事件流介绍

最新推荐文章于 2024-05-05 20:09:05 发布

陌^O^

最新推荐文章于 2024-05-05 20:09:05 发布

阅读量89

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_56597325/article/details/131538772

版权

一、事件流

概念：描述的是页面接受事件的顺序

过程：事件捕获---事件目标阶段---事件冒泡

二、事件捕获

概念：从DOM根元素开始执行应对事件（最不具体的节点最收到使事件，最具体的节点最后收到事件）

捕获机制必须使用事件监听的形式注册

dom.addEventListener(事件类型，事件处理函数，是否使用捕获机制)

事件监听，默认false不使用事件捕获

<body>
    <div class="outer">
        <div class="center">
            <div class="inner"></div>
        </div>
    </div>
    <script>
        let outer = document.querySelector('.outer')
        let center = document.querySelector('.center')
        let inner = document.querySelector('.inner')
        let handle1 = function(){
            console.log('outer');
        }
        let handle2 = function(){
            console.log('center');
        }
        let handle3 = function(){
            console.log('inner');
        }
        outer.addEventListener('click',handle1,true)
        center.addEventListener('click',handle2,true)
        inner.addEventListener('click',handle3,true)
    </script>
</body>

点击inner的盒子，返回outer center inner

点击center的盒子，返回outer center

点击outer的盒子，返回outer

三、事件冒泡（IE事件）

概念：一个元素被触发时，同样的事件将会在该元素的所有祖先元素中依次触发

事件冒泡必要性：（减少事件注册，提高效率）

引出事件委托，把事件加到父级上，通过判断事件来源子集，执行相应操作

阻止事件冒泡过程：1.判断不能冒泡区域

2.传递该区域最大盒子的注册事件

3.使用 event.stopPropagation()

L0事件：on事件类型 dom0不能追加同一类型事件，如果追加了，会发生覆盖

    <button >点击</button>
    <script>
        let button = document.querySelector('button')
        button.onclick = function(){
            console.log("首次绑定事件");
        }
        button.onclick = function(){
            console.log("第二次绑定事件");
        }//第二次绑定事件
    </script>
</body>

解绑 L0，事件对象.on事件类型 = null

eg：button.onclick = null

L2事件：可以追加事件，按照代码顺序运行

<body>
    <button >点击</button>
    <script>
        let button = document.querySelector('button')
        button.addEventListener ('click',function(){
            console.log("首次绑定事件");
        }) 
        button.addEventListener ('click',function(){
            console.log("第二次绑定事件");
        }) //首次绑定事件     第二次绑定事件
       
    </script>
</body>

解绑L2事件，通过removeEventListener(事件类型，事件处理函数名),进行解绑，

<body>
    <button >点击</button>
    <script>
        let handle1 = function(){       
            console.log("首次绑定事件");
        }
        let handle2 = function(){
            console.log("第二次绑定事件");
        }
        let button = document.querySelector('button')
        button.addEventListener ('click',handle1) 
        button.addEventListener ('click',handle2) 
        button.removeEventListener('click',handle1)//第二次绑定事件
    </script>
</body>