DOM事件基础

什么是事件

在JavaScript中，我们可以创建动态界面，但是我们需要用户的交互，比如鼠标点击，键盘输入等等，这些都是事件，我们可以通过事件来触发一些动作，比如点击按钮，弹出一个对话框，或者是改变页面的样式等等。这些交互，浏览器会给用户反馈，这些反馈就可以看做是事件。也就是事件是可以被JavaScript侦测到的一种行为。

事件三要素

事件是由三个要素组成的，分别是事件源、事件类型、事件处理程序。

下面我分别来解释一下三要素是什么：

事件源

事件源就是触发事件的对象，比如网页的按钮，文本框，图片等等，这些都是事件源。

通过事件源我们可以给事件源绑定事件。

事件类型

事件类型就是事件的类型，比如鼠标点击、移动、悬停事件，键盘输入事件等等，这些都是事件类型。

事件处理程序

事件处理程序就是事件触发后执行的代码，比如点击按钮后弹出一个对话框，这个对话框就是事件处理程序。

事件处理程序通常是一个函数，当然这个函数可以是匿名函数，也可以是具名函数。

事件执行步骤

1. 获取事件源
2. 注册事件（绑定事件）
3. 添加事件处理程序（通过函数执行）

例子：

点击按钮弹出对话框

<div>123123</div>
复制代码

我们的任务：点击这个div然后弹出一个对话框（hello）。

首先我们要获取这个div，然后给这个div绑定一个点击事件，最后添加一个事件处理程序，这个事件处理程序就是弹出一个对话框。

// 获取事件源
var div = document.getElementsByTagName('div')[0];
// 绑定事件（onclick）
div.onclick = function(){
    // 事件处理程序
    alert('hello');
}