鼠标事件：
事件 | 描述 |
onclick | 单击元素 |
oncontextmenu | 右键弹出菜单 |
ondbclick | 双击元素 |
onmousedown | 元素上按下鼠标键 |
onmouseenter | 鼠标指针移动到元素上 |
onmouseleave | 鼠标移动到元素外 |
onmousemove | 鼠标指针在元素上移动 |
onmouseover | 鼠标指针移动到一个元素或其子元素 |
键盘事件：
事件 | 描述 |
onkeydown | 按下一个键 |
onkeypress | 按下并弹起按键 |
onkeyup | 释放按键 |
onerror | 加载外部文件错误 |
onload | 加载对象 |
onresize | 调整视图大小 |
onscroll | 滚动条 |
表单事件：
事件 | 描述 |
onblur | 失去焦点 |
onchange | 状态变化 |
onfocus | 获得焦点 |
onreset | 重置表单 |
onselect | 选择文本 |
onsubmit | 提交表单 |
以上是JavaScript中的常用事件。事件处理器：它是JavaScript检测到一个特定事件时所执行的一段代码。内联处理器：
type="button" value="tip" onclick="javascript:alert('你单击了我');">通常就是直接在事件中直接处理的。可以明确写javascript:，也可以省略。
type="button" value="tip" onclick="alert('你单击了我');">作为DOM对象的属性的事件处理器：
<html lang="en"><head> <meta charset="UTF-8"> <title>Titletitle> <script> window.onload(function () { var button1 = document.getElementById('btn1'); button1.onclick = function () { alert("你单击了我"); } });script>head><body> <input type="button" value="tip" id="btn1">body>html>以上代码，我们可以看出，页面中有一个按钮，我们需要给这个按钮添加一个onclick单击事件，我们可以在页面加载函数window.onload中，先获取按钮对象，然后给对象的onclick事件，添加一个匿名处理函数，函数中只有一个处理操作，就是弹出提示框。如果不适用匿名函数，使用具名函数也是可以的。
<html lang="en"><head> <meta charset="UTF-8"> <title>Titletitle> <script> function sayHello() { alert('你单击了我。'); } window.onload = function () { var button1 = document.getElementById('btn1'); button1.onclick = sayHello; }script>head><body> <input type="button" id="btn1" value="按钮">body>html>这里需要记住，在给button1对象的onclick事件赋值处理函数时，只需要赋值函数名称即可，不需要带括号，因为带括号意味着执行函数体的代码。使用addEventListener()方法：当我们需要给一个元素添加多个事件处理器时，就需要使用这个方法了。
<html lang="en"><head> <meta charset="UTF-8"> <title>Titletitle> <script> function f1() { alert("我处理一部分"); } function f2() { alert("我处理另一个部分"); } window.onload = function () { var button1 = document.getElementById('btn1'); button1.addEventListener('click',f1); button1.addEventListener('click',f2); }script>head><body> <input type="button" id="btn1" value="多处理函数">body>html>这里需要注意一点，就是addEventListener方法中，对事件的参数不需要带on，比如按钮的单击事件是onclick，参数1添加时，只需要写click，就可以了。你可以这样理解，把事件中的on去掉，就是参数1。从上面代码中，可以看到，我们可以对一个按钮添加了两个处理函数，分别处理不同的内容。当我们需要对添加的多余处理函数，移除时，可以这样：
<html lang="en"><head> <meta charset="UTF-8"> <title>Titletitle> <script> function f1() { alert("我处理一部分"); } function f2() { alert("我处理另一个部分"); } window.onload = function () { var button1 = document.getElementById('btn1'); button1.addEventListener('click',f1); button1.addEventListener('click',f2); var button2 = document.getElementById('btn2'); button2.onclick = function () { var button1 = document.getElementById('btn1'); button1.removeEventListener('click',f1); button1.removeEventListener('click',f2); } }script>head><body> <input type="button" id="btn1" value="多处理函数"> <input type="button" id="btn2" value="移除">body>html>以上代码，我们通过移除，就可以动态的把button1对象的全部处理时间函数，都拿掉了。event对象：在键盘事件中，很多时候我们需要知道用户具体按下了什么键，可以通过event对象获得。
<html lang="en"><head> <meta charset="UTF-8"> <title>Titletitle> <script> function myFunc(event) { var key1 = event.keyCode; if(key1 == 27) { alert('你按下了esc键'); } } window.onload = function () { var input1 = document.getElementById('text1'); input1.addEventListener('keydown',myFunc); }script>head><body> <input type="text" id="text1">body>html>以上代码中，有一个文本输入框，我们为其添加了一个onkeydown事件，处理函数中，判断当按下esc键时，弹出提示框。event对象的keyCode属性获取按键码，27代表esc键。事件的发生顺序：当点击鼠标按键时，mousedown，mouseup和click，是按照什么顺序发生的呢？mousedown和mouseup事件都在click事件之前发生。下节我们分享关于逻辑控制的内容。
