## 一、鼠标事件的种类 鼠标事件指与鼠标相关的事件，具体的事件主要有以下一些。 * `click`：按下鼠标（通常是按下主按钮）时触发。 * `dblclick`：在同一个元素上双击鼠标时触发。 * `mousedown`：按下鼠标键时触发。 * `mouseup`：释放按下的鼠标键时触发。 * `mousemove`：当鼠标在一个节点内部移动时触发。当鼠标持续移动时，该事件会连续触发。 * `mouseenter`：鼠标进入一个节点时触发，进入子节点不会触发这个事件。 * `mouseover`：鼠标进入一个节点时触发，进入子节点会再一次触发这个事件。 * `mouseout`：鼠标离开一个节点时触发，离开父节点也会触发这个事件。 * `mouseleave`：鼠标离开一个节点时触发，离开父节点不会触发这个事件。 * `contextmenu`：按下鼠标右键时（上下文菜单出现前）触发，或者按下“上下文菜单键”时触发。 * `wheel`：滚动鼠标的滚轮时触发。 `click`事件指的是，用户在同一个位置先完成`mousedown`动作，再完成`mouseup`动作。因此，触发顺序是，`mousedown`首先触发，`mouseup`接着触发，`click`最后触发。 `dblclick`事件则会在`mousedown`、`mouseup`、`click`之后触发。 `mouseover`事件和`mouseenter`事件，都是鼠标进入一个节点时触发。两者的区别是，`mouseenter`事件只触发一次，而只要鼠标在节点内部移动，`mouseover`事件会在子节点上触发多次。 `mouseout`事件和`mouseleave`事件，都是鼠标离开一个节点时触发。两者的区别是，在父元素内部离开一个子元素时，`mouseleave`事件不会触发，而`mouseout`事件会触发。 ## 二、键盘事件的种类 键盘事件由用户击打键盘触发，主要有`keydown`、`keypress`、`keyup`三个事件。 * `keydown`：按下键盘时触发。 * `keypress`：按下有值的键时触发，即按下 Ctrl、Alt、Shift、Meta 这样无值的键，这个事件不会触发。对于有值的键，按下时先触发`keydown`事件，再触发这个事件。 * `keyup`：松开键盘时触发该事件。 ## 三、表单事件的种类 ### 3.1 input 事件 `input`事件当`<input>`、`<select>`、`<textarea>`的值发生变化时触发。对于复选框（`<input type=checkbox>`）或单选框（`<input type=radio>`），用户改变选项时，也会触发这个事件。`input`事件的一个特点，就是会连续触发，比如用户每按下一次按键，就会触发一次`input`事件。 ~~~ /* HTML 代码如下 <select id="mySelect"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> */ function inputHandler(e) { console.log(e.target.value) } var mySelect = document.querySelector('#mySelect'); mySelect.addEventListener('input', inputHandler); ~~~ ### 3.2 select 事件 `select`事件当在`<input>`、`<textarea>`里面选中文本时触发。 ~~~ // HTML 代码如下 // <input id="test" type="text" value="Select me!" /> var elem = document.getElementById('test'); elem.addEventListener('select', function (e) { console.log(e.type); // "select" }, false); ~~~ ### 3.3 change 事件 `change`事件当`<input>`、`<select>`、`<textarea>`的值发生变化时触发。它与`input`事件的最大不同，就是不会连续触发，只有当全部修改完成时才会触发，另一方面`input`事件必然伴随`change`事件。 * 激活单选框（radio）或复选框（checkbox）时触发。 * 用户提交时触发。比如，从下列列表（select）完成选择，在日期或文件输入框完成选择。 * 当文本框或`<textarea>`元素的值发生改变，并且丧失焦点时触发。 ~~~ // HTML 代码如下 // <select size="1" onchange="changeEventHandler(event);"> // <option>chocolate</option> // <option>strawberry</option> // <option>vanilla</option> // </select> function changeEventHandler(event) { console.log(event.target.value); } ~~~ ### 3.4 invalid 事件 用户提交表单时，如果表单元素的值不满足校验条件，就会触发`invalid`事件。 ~~~ <form> <input type="text" required oninvalid="console.log('invalid input')" /> <button type="submit">提交</button> </form> ~~~ 上面代码中，输入框是必填的。如果不填，用户点击按钮提交时，就会触发输入框的`invalid`事件，导致提交被取消。 ### 3.5 reset 事件，submit 事件 这两个事件发生在表单对象`<form>`上，而不是发生在表单的成员上。 `reset`事件当表单重置（所有表单成员变回默认值）时触发。 `submit`事件当表单数据向服务器提交时触发。 注意，`submit`事件的发生对象是`<form>`元素，而不是`<button>`元素，因为提交的是表单，而不是按钮。