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