js：事件（注册、解绑、DOM事件流、事件对象、事件委托）

转载

mb5ff40afd04638 2020-07-27 16:45:00

文章标签 事件对象结点事件流事件委托监听器 文章分类 JavaScript 前端开发

1、注册事件

（1）传统方式注册事件

<body>
        <button id="b1">请点击</button>
        <script>
             var b=document.getElementById("b1");
             b.onclick=function(){
                 alert("hello");
             }
             b.onclick=function(){
                 alert("你好");
             }
        </script>
    </body>

js：事件（注册、解绑、DOM事件流、事件对象、事件委托）_监听器

js：事件（注册、解绑、DOM事件流、事件对象、事件委托）_事件流_02

存在唯一性，同一个元素，同一个事件只能设置一个处理函数，后面注册的处理函数会覆盖前面的处理函数

（2）方法监听注册方式（IE9以上）

<body>
        <button id="b1">请点击</button>
        <script>
             var b=document.getElementById("b1");
             b.addEventListener("click", function(){
                 alert("hello");
             });
             b.addEventListener("click", function(){
                 alert("你好");
             });            
        </script>
    </body>

js：事件（注册、解绑、DOM事件流、事件对象、事件委托）_结点_03

注册事件的类型是字符串，必须加引号，且不带on
同一个元素同一个时间可以注册多个监听器

2、解绑事件

（1）传统方式

    <body>
        <button id="b1">请点击</button>
        <script>
             var b=document.getElementById("b1");
             b.onclick=function(){
                 alert("hello");
                 b.onclick=null;
             }
        </script>
    </body>

点过一次按钮后事件就失效了

（2）方法监听注册事件后解绑事件

<body>
        <button id="b1">请点击</button>
        <script>
             var b=document.getElementById("b1");
             b.addEventListener("click", fn);//不需要写小括号
             function fn(){
                 alert("hello");
                 b.removeEventListener("click",fn);
             }
        </script>
    </body>

3、DOM事件流

（1）概念

事件流是从页面中接收事件的顺序

事件发生时会在元素结点之间按照特定的顺序传播，这个传播过程即DOM事件流

从document到html再到元素搜索事件的阶段为捕获阶段，相反，为冒泡阶段

（2）演示

捕获阶段：

<body id="body">
        <button id="b1">请点击</button>
        <script>
             var b=document.getElementById("b1");
             b.addEventListener("click", function(){
                 alert("hello");
             },true);
             
             var mybody=document.getElementById("body");
             mybody.addEventListener("click", function(){
                 alert("body");
             },true);
        </script>
    </body>

js：事件（注册、解绑、DOM事件流、事件对象、事件委托）_事件委托_04

js代码中执行捕获或者冒泡中的一个阶段
onclick和attachEvent只能得到冒泡阶段
参数为false或者省略则为冒泡阶段捕获

冒泡阶段：

   <body id="body">
        <button id="b1">请点击</button>
        <script>
             var b=document.getElementById("b1");
             b.addEventListener("click", function(){
                 alert("hello");
             },false);
             
             var mybody=document.getElementById("body");
             mybody.addEventListener("click", function(){
                 alert("body");
             },false);
        </script>
    </body>

js：事件（注册、解绑、DOM事件流、事件对象、事件委托）_事件对象_05

js：事件（注册、解绑、DOM事件流、事件对象、事件委托）_结点_06

阻止冒泡：

<body id="body">
        <button id="b1">请点击</button>
        <script>
             var b=document.getElementById("b1");
             b.addEventListener("click", function(){
                 alert("hello");
                 event.stopPropagation();
             },false);
             
             var mybody=document.getElementById("body");
             mybody.addEventListener("click", function(){
                 alert("body");
             },false);
        </script>
    </body>

冒泡被阻止后只能点击一次确定，点击后不会再跳出来新的页面
event是事件对象

4、事件对象

（1）获取事件对象

<body id="body">
        <button id="b1">请点击</button>
        <script>
             var b=document.getElementById("b1");
             b.onclick=function(event){
                 console.log(event);
             }
        </script>
    </body>

event就是一个事件对象，写到侦听函数内部的小括号里面当形参来看
事件对象只有有了事件才会存在，是系统自动创建的不需要我们传递参数
事件对象是我们的事件的一系列相关数据的集合，跟事件相关

js：事件（注册、解绑、DOM事件流、事件对象、事件委托）_结点_07

（2）事件对象的属性和方法

<body>
        <button id="b1">请点击</button>
        <script>
             var b=document.getElementById("b1");
             b.onclick=function(event){
                 console.log(event.target);//触发事件的元素
                 console.log(this);//绑定事件的对象
                 console.log(event.type);//事件的类型
             }
        </script>
    </body>

js：事件（注册、解绑、DOM事件流、事件对象、事件委托）_事件委托_08

5、事件委托（代理、委派）

 <body id="body">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
        <script>
             var ul=document.querySelector("ul");
             ul.addEventListener("click",function(){
                 alert("helo");
             })
        </script>
    </body>