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

事件

/**
 * 事件：
 * onload 和 onunload 事件在用户进入或离开页面时被触发
 *
 * onchange事件常结合对输入字段的验证来使用
 * onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。
 *
 * onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，
 * 会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。
 **/

document.getElementsByTagName('body')[0].onload = function () {
    alert('document onload');
};

事件监听

/**
 * EventListener
 *
 * addEventListener() 方法
 * 特点：
 *   1. addEventListener() 方法用于向指定元素添加事件句柄。
     2. addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄。
     3. 你可以向一个元素添加多个事件句柄。
     4. 你可以向同个元素添加多个同类型的事件句柄，如：两个 "click" 事件。
     5. 你可以向任何 DOM 对象添加事件监听，不仅仅是 HTML 元素。如： window 对象。
     6. addEventListener() 方法可以更简单的控制事件（冒泡与捕获）。
     7. 当你使用 addEventListener() 方法时, JavaScript 从 HTML 标记中分离开来，可读性更强， 在没有控制HTML标记时也

可以添加事件监听。
     8. 你可以使用 removeEventListener() 方法来移除事件的监听。(element.removeEventListener("mousemove", 

myFunction);)
    *
 * element.addEventListener(event, function, useCapture);
 * event: 事件类型click、mousedown等
 * function: 事件触发后调用的函数
 * useCapture: false(默认值，冒泡传递)，true(捕获传递)
 *
 * 事件的传递：
 * 1.事件冒泡：内部元素的事件会先被触发，然后再触发外部元素
 *
 * 2.事件捕获：外部元素的事件会先被触发，然后才会触发内部元素的事件
 *
 * 浏览器的支持：
 * 01.png
 *
 * */