各种事件

  1. // click 点击
  2. // load 加载
  3. // focus 触发焦点
  4. // blur 离开焦点
  5. // change 改变
  6. // submit 表单提交
  7. // reset 表单重置
  8. // resize 窗口大小改变
  9. // mouseover 鼠标移入
  10. // mouseout 鼠标移除
  11. // scroll 滚动条

添加事件

  1. <!-- 1. html 属性绑定事件 -->
  2. <p onclick="alert('点击事件')">按钮</p>
  4. <!-- 2. dom 绑定事件 -->
  5. <script>
  6.  var p = document.getElementsByTagName('p')[0]
  7.  p.onclick = function(e) {
  8.   e // 当前事件对象，例如有些对象 "keydown" 按下键盘，可以通过 e 这个对象获取到 按键码，或者 "mousedown" 鼠标点击左键还是右键，“ mouseover” 当前光标坐标 ...
  9.   this // 代表了当前元素 "p"
  10.  }
  11. </script>

冒泡和捕获

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  <title>事件冒泡</title>
  5. </head>
  6. <body>
  7.  <div>点击事件</div>
  9.  <script type="text/javascript">
  10.   /*
  11.    我们为 “body” 和 “div” 都绑定了事件对象，由于 “div” 是 “body” 的子元素，触发了 “div” 的同时，也会触发了 “body”，所有这两者的触发顺序模型，就是捕获和冒泡。
  12.    本例中，我们在 addEventListener 的第三个参数设置为 “false”，所以触发的是 “冒泡事件”，执行的顺序是先 “div” 后 “body”，从下级往上级 “冒”
  13.    捕获呢，则是反之，只需要把 “false” 修改成 “true”
  14.   */
  16.   document.getElementsByTagName('body')[0].addEventListener('click', function() {
  17.    alert(this) // [object HTMLBodyElement]
  18.   }, false)
  19.   document.getElementsByTagName('div')[0].addEventListener('click', function() {
  20.    alert(this) // [object HTMLDivElement]
  21.   }, false)
  22.  </script>
  24. </body>
  25. </html>

移除事件

  1. // 绑定
  2. window.addEventListener('click',f)
  4. // 移除
  5. window.removeEventListener('click', f)