这是我参与11月更文挑战的第20天，活动详情查看：2021最后一次更文挑战

事件

事件是什么？

所谓事件，就是浏览器告知JavaScript程序用户的行为。例如用户点击了HTML页面中的某个按钮，或者用户输入用户名或密码等操作。

如下代码展示了鼠标点击按钮事件操作：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件是什么</title>
</head>
<body>
<button id="btn">按钮</button>
<script>
    // 获取按钮元素
    var button = document.getElementById('btn');
    // 事件绑定
    button.onclick = function () {
        console.log('你终于点中我了... ...');
    }
</script>
</body>
</html>

事件操作解析图如下所示：

事件类型

事件根据使用的场景不同，可以分为如下几种：
依赖于设备的输入事件：键盘事件和鼠标事件，这些事件都是直接和设备相关的。
独立于设备的输入事件：例如click事件等，这些事件并没有直接与设备相关。
用户界面的相关事件：用户界面事件属于较高级的事件，一般多用于表单中的组件。
状态变化的相关事件：这些事件与用户行为无关，而是由网络或测览器触发的。
特定API事件：这些事件多用于特定场景的实现，例如HTML5中提供的拖放API中的事件等。
与错误处理的相关事件。

事件实现步骤

1、定位页面中指定的元素

2、未指定元素绑定事件：具有一个事件监听器（监听用户相应的行为）

3、为绑定的事件编写相应的处理函数（用户触发相应的行为时，函数做出相应）

如下代码所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件实现步骤</title>
</head>
<body>
<button id="btn">按钮</button>
<script>
    // 1、定位页面中指定的元素
    var button = document.getElementById('btn');
    // 2、未指定元素绑定事件 ：具有一个事件监听器（监听用户相应的行为）
    button.onclick = function () {
        // 3、为绑定的事件编写相应的处理函数（用户触发相应的行为时，函数做出相应）
        console.log('你终于点中我了... ...');
    }
</script>
</body>
</html>

注册事件是什么

所谓注册事件，就是将JavaScript函数与指定的事件相关联，被绑定的函数成为该事件的句柄。当该事件被触发时，绑定的函数会被调用。

注册事件具有以下三种方式实现:

HTML页面元素提供的事件属性
DOM标准规范中HTML相关对象提供的事件属性
通过向HTML页面中指定元素添加事件监听器

1、HTML页面元素提供的事件属性

缺点：没有将HTML结构与行为进行有效分离。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML页面元素提供的事件属性</title>
</head>
<body>
<button onclick="myClick()" id="btn">按钮</button>
<script>
    function myClick() {
        console.log('你终于点中我了...');
    }
</script>
</body>
</html>

代码分析：

2、DOM对象提供的事件属性

通过DOM标准规范中的Document对象定位HTML页面的元素，所返回的DOM对象提供了一系列的事件属性，通过这些事件属性可以实现注册事件的功能。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM对象提供的事件属性</title>
</head>
<body>
<button onclick="myClick()" id="btn">按钮</button>
<script>
    var btn = document.getElementById('btn');
    //DOM对象的事件属性
    btn.onclick = myClick;
    function myClick() {
        console.log('你终于点中我了...');
    }
</script>
</body>
</html>

通过DOM对象的事件属性方式注册事件，是不允许重复注册的。如果以这种方式为某个元素注册相同事件多次的话，只有最后一次注册的函数有效。

3、事件监听器

DOM标准规范提供的addEventlistener()方法，调用该方法表示向指定元素添加事件监听器。

element.addEventListener(exentName, functionName, capture)

参数名称	描述
eventName	为元素指定具体的事件名称（例如单击事件是click等）
funcationName	注册事件的句柄
capture	设置事件是捕获阶段还是冒泡阶段。false为默任值，表示冒泡阶段

addEventListener()方法是DOM的标准规范所提供的注册事件监听器的方法，它的优点包括以下几点:

它允许某个HTML页面的元素在绑定一个事件的同时，注册多个事件的句柄（事件处理函数）。
它提供了一种更精细的手段控制事件的触发阶段（是捕获阶段还是冒泡阶段）。

在E8及之前版本的浏览器，并不支持addEventListenter()方法添加事件监听器。而是使用 attachEvent()方法进行添加。

element.attachEvent(eventName, functionName)

eventName：为元素指定具体时间名称（例如单击事件是click等）
funcationName ：注册事件的句柄

如下代码所示 DOM对象提供的事件属性与事件监听器的比较以及浏览器的兼容问题和解决方案：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加事件监听器</title>
</head>
<body>
<button id="btn">按钮</button>
<script>
    var btn = document.getElementById('btn');

    //1、DOM对象提供的事件属性  —— 无法同时为一个指定元素绑定相同事件多次
    btn.onclick = function(){
        console.log('xxx...');
    };//无输出值被修改为yyy
    btn.onclick = function(){
        console.log('yyy...');//输出yyy
    }

    /*
    2、添加事件监听器
        为指定元素添加事件监听器
        addEventListener(eventName,claaback)
       *参数：
            * eventName：表示绑定事件的名称（注意：没有on）
            * callback ：表示事件的处理函数（回调函数）
        *允许为相同元素绑定相同事件多次
    */
    btn.addEventListener('click',function () {
        console.log('xxxx')//xxxx
    });
    btn.addEventListener('click',function () {
        console.log('yyyy')//yyyy
    });
    

    /*3、事件监听器的浏览器兼容问题（IE8以下版本浏览器不支持）
    attachEvent(eventName, functionName)方法
    *参数
        *eventName：表示绑定事件的名称（注意：必须有on）
        *functionName：表示事件的处理函数
    */
    btn.attachEvent('onclick',function () {
        console.log('xxxx')
    });

    // 4、提供浏览器兼容问题解决方案
    function bind(element,eventName,funcationName) {
        if (element.addEventListener){
            element.addEventListener(eventName,funcationName);
        }else{
            element.addEventListener('on' + eventName,funcationName);
        }
    }
</script>
</body>
</html>