下面我们去看一下处理事件的几种方法，常用的有三种方法 … 可以直接在元素上使用事件的属性，还有可以使用元素的事件处理属性，还可以使用 addEventListener() 这个方法为元素绑定事件....

先来看一下这个网页，很简单，页面上只有一个用链接做的按钮 … 打开 Chrome 浏览器的开发者工具 … 然后选中这个链接按钮 ..

在右边这个窗口里，打开 Properties 选项卡，查看一下这个元素的属性 …

在它的属性列表里，你会发现一些以 on 这个单词开头的属性 … 这些就是事件的处理程序 … on 的后面，一般就是事件的名称 … 比如这个 onclick 会在用户点击这个元素的时候去调用 …. 对应的事件的名字就是 click .... 点击事件。

下面还有 onmouseover … 把鼠标指针放在这个元素上面的时候会执行这个处理程序 … 还有 onmouseout … 鼠标指针离开这个元素的时候会去执行它 …

这些处理程序都会在发生某个特定的事件的时候去执行 …

直接的属性

我们先看一下直接在元素上使用这些事件属性的方法去处理发生的事件 …. 先用编辑器打开这个网页 … 找到这个链接按钮元素 … 比如我们想在点击了这个按钮的时候，去做点事 …

可以使用 onclick 属性 … 这个属性的值就是当在这个按钮上发生了点击事件的时候，要做的事情 … 这里只是简单的在控制台上输出一点文字 …

onclick=“console.log(’被点了！')"

注意这里如果要用到引号的话，应该使用单引号 … 因为双引号里面可以包围单引号 …

下面我们再添加一个事件属性 … 用一个 onmouseover … 它会在鼠标指针放在这个元素上面的时候去执行 …

onmouseover=“console.log(’谁在上面？')"

可以再去添加一个 onmouseout … 鼠标离开的时候会去执行它 …

onmouseout=“console.log(’离开了')"

这样，当我们把鼠标放在这个链接按钮上的时候，会在控制台上显示 谁在上面 … 点击的时候 … 会显示 被点了 … 离开的时候，会显示 离开了 …

保存一下 … 回到浏览器 … 刷新一下 … 打开 控制台 …

鼠标放在这个按钮上 … 触发了 mouseover 事件 … 在控制台上会显示 谁在上面 … 点击鼠标 … 触发 click 事件 … 要做的事就是在控制台上显示 有人点我了 … 鼠标离开 … 触发 onmouseout 事件 … 在控制台上显示 离开了 …

事件处理程序

（#返回index.html）

这种直接在元素上添加事件属性来处理事件的方法比较适合去执行简单的动作 … 这种方法也会让文档的代码变得混乱 …. 我们应该把程序的代码跟 HTML 的代码分离开 …

在下面的视频里我们再看去看一下使用事件处理程序还有绑定事件的方法来处理事件 …