0168 registration event (2 ways), listen for events, delete events

1.3.1 Registration Event (2 ways)

Add an event to an element, called registered events or binding events .
Sign up event in two ways: the traditional way and method monitor registration mode.

1.3.1.1 Registration traditional way

Use beginning on events onclick

Features:

1, registration events uniqueness
2, the same elements in the same event can only set a handler, the handler will last registered handler front cover registration

<button onclick=“alert('hi~')”></button>
btn.onclick = function() {}

1.3.1.2 Methods listener registration methods

1, w3c standard recommended embodiment
2, addEventListener () is a method
3, before IE9 IE does not support this method, using the attachEvent () instead of

4, features:

(1) with an element of the same event can register multiple listeners
(2) registered by the order execution

1.3.2 Event Listeners

1.3.2.1 addEventListener () event listeners (after IE9 support)

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

eventTarget.addEventListener () method specified listeners registered on eventTarget (target object), the object is triggered when a specified event, will execute the event handler.

This method accepts three parameters:

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

1.3.2.2 attacheEvent () event listener (IE678 support)

eventTarget.attachEvent(eventNameWithOn, callback)

eventTarget.attachEvent () method specified listeners registered on eventTarget (target object), the object is triggered when a specified event, specified callback function will be executed. Note: IE8 and earlier versions support.

This method accepts two parameters:

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

<button>传统注册事件</button>
<button>方法监听注册事件</button>
<button>ie9 attachEvent</button>
<script>
    var btns = document.querySelectorAll('button');
    // 1. 传统方式注册事件
    btns[0].onclick = function() {
        alert('hi');
    }
    btns[0].onclick = function() {
            alert('hao a u');
        }
   // 2. 事件侦听注册事件 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>

1.3.2.3 Event Listener compatibility solutions

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

封装一个函数，函数中判断浏览器的类型：

    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;
        }
    }

1.3.3 删除事件（解绑事件）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>

<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 删除事件
        // 里面的fn 不需要调用加小括号 【经测试，可以把整个fn函数写进来。】
        divs[1].addEventListener('click', 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>

</html>

删除事件兼容性解决方案

    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;
        }
    }