浅谈JS事件

最新推荐文章于 2022-09-29 22:00:00 发布

RunHio

最新推荐文章于 2022-09-29 22:00:00 发布

阅读量111

点赞数

分类专栏：前端文章标签： dom js

本文链接：https://blog.csdn.net/weixin_45925906/article/details/115711206

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

什么是JS事件

事件是文档和浏览器窗口中发生的特定的交互瞬间。如鼠标点击，鼠标滚动和输入框输入等。
简单事件示例，点击按钮后alert

 let btn=document.getElementById("btn")    
       //onclick一次只能绑定一个事件
       btn.onclick=function(){
       alert("click 1")
      }

什么是事件流

事件流描述的是从页面中接受事件的顺序，一般事件流有两种，事件冒泡流和事件捕获流。我们先来看一下什么是事件冒泡和事件捕获

事件冒泡

看一下代码先

<body onclick="bodyClick()">

    <div onclick="divClick()">
        <button onclick="btn()">
            <p onclick="p()">点击冒泡</p>
        </button>
    </div>
    <script>
       
       function p(){
          console.log('p标签被点击')
       }
        function btn(){
            console.log("button被点击")
        }
         function divClick(event){
             console.log('div被点击');
         }
        function bodyClick(){
            console.log('body被点击')
        }

    </script>

</body>

点击按钮后输出
在这里插入图片描述
正如上面我们所说的，它会从一个最具体的的元素接收，然后逐级向上传播， p=>button=>div=>body…事件冒泡可以形象地比喻为把一颗石头投入水中，泡泡会一直从水底冒出水面。

事件捕获

事件捕获流的思想是不太具体的DOM节点应该更早接收到事件，而最具体的节点应该最后接收到事件。

<body>
<div>
    <button>
        <p>点击捕获</p>
    </button>
</div>
<script>
    var oP=document.querySelector('p');
    var oB=document.querySelector('button');
    var oD=document.querySelector('div');
    var oBody=document.querySelector('body');

    oP.addEventListener('click',function(){
        console.log('p标签被点击')
    },true);

    oB.addEventListener('click',function(){
        console.log("button被点击")
    },true);

    oD.addEventListener('click',  function(){
        console.log('div被点击')
    },true);

    oBody.addEventListener('click',function(){
        console.log('body被点击')
    },true);

</script>
</body>

输出结果
在这里插入图片描述
和冒泡流相反，从最不具体的元素接收到最具体的元素接收事件 body=>div=>button=>p

Dom事件流

DOM2级事件’规定的事件流包含3个阶段，事件捕获阶段、处于目标阶段、事件冒泡阶段。首先发生的事件捕获为截获事件提供机会，然后是实际的目标接收事件，最后一个阶段是事件冒泡阶段，可以在这个阶段对事件做出响应。
在DOM事件流中，事件的目标在捕获阶段不会接收到事件，这意味着在捕获阶段事件从document到<p>就停止了，下个阶段是处于目标阶段，于是事件在<p>上发生，并在事件处理中被看成冒泡阶段的一部分，然后，冒泡阶段发生，事件又传播回document

在这里插入图片描述

DOM0级事件

<button id="btn">点击</button>
    <script>
       let btn=document.getElementById("btn")    
       onclick一次只能绑定一个事件
       btn.onclick=function(){
           alert("click 1")
       } 
       btn.onclick=function(){
           alert("click 2") 
       }
    </script>

DOM0 级添加事件时，后面的事件会覆盖前面的事件
移除事件

        btn.onclick=function(){
            alert("点我")
            btn.onclick=null
        }

Dom2级事件

主流浏览器 DOM2 级事件是通过以下两个方法用于处理指定和删除事件处理程序的操作：

addEvenetListener
removeEventListener
它们都接受三个参数：

type：事件类型，如’click’、‘mouseover’、‘mouseout’，在事件名前不加’on’
listener：事件处理方法
useCapture：布尔参数，不传该参数时默认是 false，表示在事件冒泡阶段处理，如果是 true，则表示在捕获阶段调用事件处理程序

同时不会互相覆盖，示例代码

        btn.addEventListener('click',function(){
            alert("alert 1")
        })
        btn.addEventListener('click',function(){
            alert("alert 2")
        })