持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第7天，点击查看活动详情

Web API中的事件指的是能被识别的操作，比如点击、移入移出鼠标、输入等。事件的三要素是事件源、事件名称以及事件处理函数。

事件源

事件源指的是触发事件的元素（元素指的就是网页中的标签），因此需要准确获取元素才能对该元素绑定事件。

1. 根据id获取元素：var box = document.getElementById('box');
2. 根据类名获取元素：var classBox = document.getElementsByClassName('boxClass');
3. 根据标签名获取元素：var divBox = document.getElementsByTagName('div');
4. 根据name属性获取元素：<div name="boxName">根据name属性获取元素</div>；var nameBox = document.getElementsByName('boxName');
5. 根据选择器获取元素：var queryBox = document.querySelector('#boxName');querySelector是根据指定的选择器，获取第一个匹配的元素；var queryAllBox = document.querySelectorAll('.boxClass');querySelectorAll是根据指定的选择器，获取所有匹配的元素。

事件名称

常用的事件名称有：

• onclick：当点击某个元素时；
• onmouseenter：当鼠标指针移动到元素上时；
• onmouseleave：当鼠标指针移出元素时；
• onkeydown：某个键盘按键被按下时； 等等

事件函数

给特定事件源绑定某个事件后还需要写上事件处理函数。绑定事件函数的方式有两种：

一、用事件名直接绑定

//html
<input id="btn" type="button" value="点击"/>
//js
var btn = document.getElementById('btn');
console.log(btn);
btn.onclick = function () {
    alert('点击事件！');
}

二、用事件监听函数绑定

//html
<input id="btn" type="button" value="点击"/>
//js
var btn = document.getElementById('btn');
console.log(btn);
btn.addEventListener('click', function(){
    alert('点击事件！');
});

addEventListener(event,function,useCapture)函数需要传递三个参数，分别是事件类型名称、执行函数以及是否冒泡传递（默认值是false即是冒泡传递，true即是捕获传递）。

事件冒泡和事件捕获

事件冒泡和事件捕获就是事件执行的过程触发顺序的不同。以下图为例：

当给子元素box2绑定点击事件时，如果设置的是事件冒泡，那么事件触发的顺序将会先是box2然后是box1；相反的，如果设置的是事件捕获，那么事件触发的顺序将会先是box1然后才是box2。