（12）JavaScript之[事件][事件监听]

事件

 1 /**
 2  * 事件：
 3  * onload 和 onunload 事件在用户进入或离开页面时被触发
 4  *
 5  * onchange事件常结合对输入字段的验证来使用
 6  * onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。
 7  *
 8  * onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，
 9  * 会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。
10  **/
11
12 document.getElementsByTagName(‘body‘)[0].onload = function () {
13     alert(‘document onload‘);
14 };

事件监听

 1 /**
 2  * EventListener
 3  *
 4  * addEventListener() 方法
 5  * 特点：
 6  *   1. addEventListener() 方法用于向指定元素添加事件句柄。
 7      2. addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄。
 8      3. 你可以向一个元素添加多个事件句柄。
 9      4. 你可以向同个元素添加多个同类型的事件句柄，如：两个 "click" 事件。
10      5. 你可以向任何 DOM 对象添加事件监听，不仅仅是 HTML 元素。如： window 对象。
11      6. addEventListener() 方法可以更简单的控制事件（冒泡与捕获）。
12      7. 当你使用 addEventListener() 方法时, JavaScript 从 HTML 标记中分离开来，可读性更强， 在没有控制HTML标记时也
13
14 可以添加事件监听。
15      8. 你可以使用 removeEventListener() 方法来移除事件的监听。(element.removeEventListener("mousemove",
16
17 myFunction);)
18     *
19  * element.addEventListener(event, function, useCapture);
20  * event: 事件类型click、mousedown等
21  * function: 事件触发后调用的函数
22  * useCapture: false(默认值，冒泡传递)，true(捕获传递)
23  *
24  * 事件的传递：
25  * 1.事件冒泡：内部元素的事件会先被触发，然后再触发外部元素
26  *
27  * 2.事件捕获：外部元素的事件会先被触发，然后才会触发内部元素的事件
28  *
29  * 浏览器的支持：
30  * 01.png
31  *
32  * */