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)

publish : 10/22/2018, 2:50:03 PM / by: jmjc.tech

JavaScript 教程 JavaScript 运行

JavaScript 数据类型 JavaScript 数字 JavaScript 字符串 JavaScript 数组 JavaScript 对象 JavaScript Map JavaScript Set JavaScript null JavaScript undefined JavaScript 类型检测 JavaScript 包装对象

JavaScript 控制流程 JavaScript 条件判断 JavaScript 循环

JavaScript 函数 JavaScript 参数 JavaScript 匿名函数 JavaScript 箭头函数 JavaScript 递归 JavaScript 闭包 JavaScript 生成器

JavaScript 作用域 JavaScript this JavaScript 对象冒充 JavaScript 命名空间

JavaScript 迭代

JavaScript 面向对象 JavaScript class

JavaScript 内置对象 JavaScript Date JavaScript Math JavaScript JSON JavaScript RegExp

JavaScript 异步 JavaScript setTimeout JavaScript setInterval JavaScript 回调 JavaScript Promise JavaScript async await

JavaScript 异常处理 JavaScript console

JavaScript 浏览器 JavaScript window JavaScript DOM JavaScript 表单 JavaScript 文件上传 JavaScript cookie

JavaScript Ajax JavaScript 跨域请求

JavaScript 事件

更多教程 HTML5 教程 CSS3 教程 JavaScript 教程 JQuery 教程 React.js 教程 Node.js 教程 Koa2 教程 Python 教程 Linux 教程