（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
  *
  * */