一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第12天，点击查看活动详情。

DOM事件基础

事件概述

JavaScript使我们有能力创建动态页面，而事件是可以被JavaScript检测到的行为。
网页中的每个元素都可以产生某些可以触发JavaScript的事件，例如，我们可以在用户点击某按钮时产生一个事件，然后去执行某些操作。

事件是由三部分组成 事件源、事件类型、事件处理程序 我们也称事件三要素。
(1) 事件源
事件被触发的对象，我点了按钮弹出了对话框，按钮被触发了，那么按钮就是事件源。
(2) 事件类型
就是如何触发？比如鼠标点击触发(onclick)、鼠标经过触发、键盘按下触发。
(3) 事件处理程序
一般是通过一个函数赋值的方式完成要做什么事情

例子：点击一个按钮，弹出对话框; 点击div(默认设定好样式)，控制台输出"我被选中了"

    <button id="btn">唐伯虎</button>
    <div>123</div>

        //案例1
        var btn = document.getElementById('btn');
        btn.onclick = function () {
            alert('秋香');
        }
    
        //案例2
        var div = document.querySelector('div'); //获取事件源
        div.onclick = function () { // 注册事件div.onclick 与添加事件处理程序function
            console.log('我被选中了');
        }

总结:
执行事件的步骤：

获取事件源
注册事件(绑定事件)
添加事件处理程序(采取函数赋值的方式)

注册事件的两种方式

注册事件有两种：传统方式、方法监听注册方式

    下面代码的公用HTML结构
    
    <button>传统注册事件</button>
    <button>方法监听注册事件</button>

1. 传统注册方式：

传统注册方式是利用on开头的事件，比如onclick
<button onclick="alert('hi~')"></button>
btn.onclick = function(){}

特点:
注册事件的唯一性，同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数。
比如:

        var btn = document.querySelectorAll('button');
        btn[0].onclick = function () {
            alert('hi');
        }
        btn[0].onclick = function () {
            alert('ni hao a'); //同一个元素，后面的处理函数会覆盖前面的处理函数
        }

2. 方法监听事件方式

方法监听事件方式是w3c标准推荐方式，利用addEventListener()方法进行注册事件，IE9之前的IE不支持此方法，可使用attachEvent() 代替。

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

addEventListener()介绍:

eventTarget.addEventListener() 将指定的监听器注册到eventTarget(目标对象) 上，当对该对象触发指定事件时，就会执行事件处理函数
该方法接收三个参数：
type： 事件类型是字符串，比如click、mouseover，注意这里不要带on
listener： 事件处理函数，事件发生时，会调用该监听函数
useCapture： 可选参数，是一个布尔值，默认是false。

示例：

        btn[1].addEventListener('click', function () {
            alert('Hello World'); //这里的函数有时候也叫做监听器
        })
        btn[1].addEventListener('click', function () {
            alert('Hello World222'); //这里的函数有时候也叫做监听器
        })

关于attachEvent监听事件，ie9以前才支持，基本不使用了，一般是封装一个函数来判断是否能使用addEventListener，不行再判断attachEvent，但是没必要，直接用新的就好。
语法：
eventTarget.attachEvent(eventNameWithOn, callback)
第一个参数是事件类型字符串，onclick、onmouseover，要带on
第二个参数是事件处理函数

删除事件

1.传统注册方式的解绑

    语法：eventTarget.事件(onclick) = null;
    
    
        div[0].onclick = function () {
            alert(11);
            // 传统方式删除事件
            div[0].onclick = null;
        }

2.方法监听注册方式的解绑

        语法：eventTarget.removeEventListener(type,listener[,useCapture]);
        
        
        div[1].addEventListener('click', fn);
        function fn() {
            alert(22);
            div[1].removeEventListener('click', fn);
        }

补充： ie9才支持的注册事件attachEvent的解绑
语法：eventTarget.detachEvent('onclick',fn);