JavaScript 事件

事件

事件机制是 UI 编程 一个非常重要的特性,我们日常使用手机APP、桌面软件,点击了一个按钮的背后,就是触发了一个点击事件处理。JavaScript 的本质上也是一门 UI 编程语言,所有内置了功能非常丰富的事件对象。


执行

事件执行的两种方法。

<!-- 1. html 属性绑定事件 -->
<p onclick="alert('点击事件')">按钮</p>

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

事件对象

常用的事件对象。

// click 点击
// load 加载
// focus 触发焦点
// blur 离开焦点
// change 改变
// submit 表单提交
// reset 表单重置
// resize 窗口大小改变
// mouseover 鼠标移入
// mouseout 鼠标移除
// scroll 滚动条

DOM2 事件

如果把上例 2. dom 绑定事件 称为 dom 0 事件,那是 dom 2 事件 就是对它进行了一些 bug 的修复和增加了一个 捕获和冒泡 的功能。

简单的说,冒泡和捕获就是事件的触发流程

<!DOCTYPE html>
<html>
<head>
 <title>事件冒泡</title>
</head>
<body>
 <div>点击事件</div>

 <script type="text/javascript">
  /*
   我们为 “body” 和 “div” 都绑定了事件对象,由于 “div” 是 “body” 的子元素,触发了 “div” 的同时,也会触发了 “body”,所有这两者的触发顺序模型,就是捕获和冒泡。
   本例中,我们在 addEventListener 的第三个参数设置为 “false”,所以触发的是 “冒泡事件”,执行的顺序是先 “div” 后 “body”,从下级往上级 “冒”
   捕获呢,则是反之,只需要把 “false” 修改成 “true”
  */

  document.getElementsByTagName('body')[0].addEventListener('click', function() {
   alert(this) // [object HTMLBodyElement]
  }, false)
  document.getElementsByTagName('div')[0].addEventListener('click', function() {
   alert(this) // [object HTMLDivElement]
  }, false)
 </script>

</body>
</html>

移除事件

/*
 DOM2 事件相比于 DOM0,还增加了移除事件的功能
 还有一点区别,DOM0 的事件名称需要 + ‘on’
*/

// 绑定
window.addEventListener('click',f)

// 移除
window.removeEventListener('click', f)
更多教程 HTML5 教程 CSS3 教程 JavaScript 教程 JQuery 教程 React.js 教程 Node.js 教程 Koa2 教程 Python 教程 Linux 教程