- 掌握 JavaScript 事件的概念，并能写出基本的事件相关的代码
- 掌握如何通过 JavaScript 操作 DOM 的样式
监听器留意事件是否发生，然后处理器就是对事件发生做出的回应
每个可用的事件都会有一个事件处理器.
网络事件不是 JavaScript 语言的核心——它们被定义成内置于浏览器的JavaScript APIs。
使用网页事件的方式
btn.onfocus及btn.onblur :按钮被置于焦点或解除焦点时.通常用于显示有关如何在置于焦点时填写表单字段的信息，或者如果表单字段刚刚填入不正确的值，则显示错误消息。
btn.ondblclick 按钮被双击时改变.
window.onkeypress, window.onkeydown, window.onkeyup — 当按钮被按下时颜色会发生改变. keypress 指的是通俗意义上的按下按钮 (按下并松开), 而 keydown 和 keyup 指的是按键动作的一部分,分别指按下和松开.注意如果你将事件处理器添加到按钮本身，它将不会工作 — 我们只能将它添加到代表整个浏览器窗口的 window对象中。
btn.onmouseover 和 btn.onmouseout — 颜色将会在鼠标移入按钮上方时发生改变, 或者当它从按钮移出时.
不推荐使用行内事件处理器：
<button onclick="bgChange()">Press me</button>
注释: 将您的编程逻辑与内容分离也会使您的站点对搜索引擎更加友好。
addEventListener()和removeEventListener()；
btn.addEventListener('click', bgChange);
在addEventListener() 函数中, 我们具体化了两个参数——我们想要将处理器应用上去的事件名称，和包含我们用来回应事件的函数的代码。
您也可以给同一个监听器注册多个处理器，下面这种方式不能实现这一点：
myElement.onclick = functionA;
myElement.onclick = functionB;
第二行会覆盖第一行，但是下面这种方式就会正常工作了：
myElement.addEventListener('click', functionA);
myElement.addEventListener('click', functionB);
当元素被点击时两个函数都会工作；
事件对象
有时候在事件处理函数内部，您可能会看到一个固定指定名称的参数，例如event，evt或简单的e。 这被称为事件对象，它被自动传递给事件处理函数，以提供额外的功能和信息。
当您要在多个元素上设置相同的事件处理程序时，e.target非常有用，并且在发生事件时对所有元素执行某些操作.