注册事件(绑定事件)

注册事件概述

给元素添加事件，称为注册事件或者绑定事件。
注册事件有两种方式：

传统方式
方法监听注册方式

①传统注册方式

利用 on 开头的事件 onclick
<button οnclick=“alert(‘hi~’)”></button>
btn.onclick = function() {}
特点：注册事件的唯一性
同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数

②方法监听注册方式

w3c 标准推荐方式
addEventListener() 它是一个方法
IE9 之前的 IE 不支持此方法，可使用 attachEvent() 代替
特点：同一个元素同一个事件可以注册多个监听器
按注册顺序依次执行

addEventListener 事件监听方式

语法：

eventTarget.addEventListener(type, listener[, useCapture])

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

该方法接收三个参数：

type：事件类型字符串，比如 click 、mouseover ，注意这里不要带on
listener：事件处理函数，事件发生时，会调用该监听函数
useCapture：可选参数，是一个布尔值，默认是 false。

例如：

<script>
        var btns = document.querySelectorAll('button');
            // 事件侦听注册事件 addEventListener 
            // (1) 里面的事件类型是字符串 必定加引号 而且不带on
            // (2) 同一个元素 同一个事件可以添加多个侦听器（事件处理程序）
        btns[1].addEventListener('click', function() {
            alert(22);
        })
        btns[1].addEventListener('click', function() {
                alert(33);
            })
            // 3. attachEvent ie9以前的版本支持
        btns[2].attachEvent('onclick', function() {
            alert(11);
        })
    </script>

attachEvent 事件监听方式

eventTarget.attachEvent(eventNameWithOn, callback)

eventTarget.attachEvent()方法将指定的监听器注册到 eventTarget（目标对象）上，当该对象触发指定的事件时，指定的回调函数就会被执行。

该方法接收两个参数：

eventNameWithOn：事件类型字符串，比如 onclick 、onmouseover ，这里要带 on
callback：事件处理函数，当目标触发事件时回调函数被调用

注意：IE8 及早期版本支持

例如：

        btns[2].attachEvent('onclick', function() {
            alert(11);
        })

注册事件兼容性解决方案

function addEventListener(element, eventName, fn) {
   // 判断当前浏览器是否支持 addEventListener 方法
   if (element.addEventListener) {
   element.addEventListener(eventName, fn); // 第三个参数 默认是false
   } else if (element.attachEvent) {
   element.attachEvent('on' + eventName, fn);
   } else {
   // 相当于 element.onclick = fn;
   element['on' + eventName] = fn;
 }

兼容性处理的原则：首先照顾大多数浏览器，再处理特殊浏览器

删除事件(解绑事件)

删除事件的方式

传统注册方式

eventTarget.onclick = null;

方法监听注册方式

① eventTarget.removeEventListener(type, listener[, useCapture]);
② eventTarget.detachEvent(eventNameWithOn, callback);

例如：
场景：触发一个事件之后，再触发不会有相应

<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <script>
        var divs = document.querySelectorAll('div');
        divs[0].onclick = function() {
                alert(11);
                // 1. 传统方式删除事件
                divs[0].onclick = null;
            }
            // 2. removeEventListener 删除事件
        divs[1].addEventListener('click', fn) // 里面的fn 不需要调用加小括号

        function fn() {
            alert(22);
            divs[1].removeEventListener('click', fn);
        }
        // 3. detachEvent
        divs[2].attachEvent('onclick', fn1);

        function fn1() {
            alert(33);
            divs[2].detachEvent('onclick', fn1);
        }
    </script>
</body>

注意：删除事件的时候，不要使用匿名函数，否则不方便删除，建议可以把方法单独给拿出来。

删除事件兼容性解决方案

function removeEventListener(element, eventName, fn) {
   // 判断当前浏览器是否支持 removeEventListener 方法
   if (element.removeEventListener) {
   element.removeEventListener(eventName, fn); // 第三个参数 默认是false
   } else if (element.detachEvent) {
   element.detachEvent('on' + eventName, fn);
   } else {
   element['on' + eventName] = null;
 }