JS——注册事件及解绑事件

概念

给元素添加事件，称为注册事件或绑定事件。
给元素移除事件，称为解绑事件。

1. 传统方式（on~）

注册事件

以on开头的事件：
onclick（鼠标单击），onmousemove（鼠标移动）等等
语法：

target.onclick=function(){};

举例：给button注册事件，使按下打印数字1

<button>按钮</button>
    <script>
        let btn=document.querySelector('button');
        //注册事件
        btn.onclick=function(){
             console.log('1');
        }
    </script>
    //打印1，一直点击按钮一直打印

解绑事件

语法：

eventTarget.onclick=null;

EventTarget（目标对象） 是一个 DOM 接口，由可以接收事件、并且可以创建侦听器的对象实现。
Element，document 和 window 是最常见的 event targets。
举例：

<button>按钮</button>
    <script>
        let btn=document.querySelector('button');
        btn.onclick=function(){
            console.log('1');
            btn.onclick=null;//解绑事件
        }
    </script>
    //页面打印一个1后被解绑，再次点击不再打印

2. 事件监听注册方式 addEventListener()

注册事件

语法：

target.addEventListener(type, listener, useCapture);

addEventListener()方法将指定的监听器注册到eventTarget（目标对象）上，当该对象出发指定事件时，就会执行该事件处理函数。

type：事件类型字符串，eg:click,mouseover等（此方法不加on）

listener：事件处理函数，事件发生时，会调用该监听函数。

useCapture：可选参数，是一个布尔值，未定义时默认为false.

• false:在事件冒泡阶段调用事件处理程序（从下到上）
• true:在事件捕获阶段调用事件处理函数（从上到下）

举例：

 <button>按钮</button>
    <script>
        let btn=document.querySelector('button');
        btn.addEventListener('click',function(){
            console.log('1')
        })
    </script>
     //打印1，一直点击按钮一直打印

解绑事件

语法：

target.removeEventListener(type, listener[, useCapture]);

举例：

<button>按钮</button>
    <script>
        //绑定
       let dom=function(){
           console.log('绑定')
       }
       let btn=document.querySelector('button')
       //为了能够解绑，将dom定义在外边
       btn.addEventListener('click',dom,false);
       //解绑，保持与addEventListener里的参数一致才能解绑成功
       btn.removeEventListener('click',dom,false)
    </script>

如果在定义事件时使用内部函数（也就是没有名称的的函数），解绑将会失败。所以事件解绑成功的主要原因就是：保持addEventListener和removeEventListener里面的参数一致。

3.两种方式的区别

传统方式

注册事件具有唯一性，同一元素同一事件只能设置一个处理函数，最后注册的处理函数会覆盖前边注册的处理函数。
举例：

 <button>按钮</button>
    <script>
       let btn=document.querySelector('button')
       btn.onclick=function(){
           console.log('1')
       }
       btn.onclick=function(){
           console.log('2')
       }
    </script>

结果：点击按钮，只打印2，第一个注册的事件被第二个覆盖

事件监听注册方式

同一元素同一事件可以注册多个监听器，按注册顺序依次执行。
举例：

 <button>按钮</button>
    <script>
       let btn=document.querySelector('button')
       btn.addEventListener('click',function(){
        console.log('1')
       })
       btn.addEventListener('click',function(){
        console.log('2')
       })
    </script>

结果：打印1和2，第一个注册的事件不会被覆盖