JavaScript DOM与事件 下载APP
章节索引 :

DOM 与事件

事件是您在编程时系统内发生的动作或者发生的事情,系统通过它来告诉您在您愿意的情况下您可以以某种方式对它做出回应。例如:如果您在网页上单击一个按钮,您可能想通过显示一个信息框来响应这个动作。在这篇文章中我们将围绕事件讨论一些重要的概念,并且观察它们在浏览器上是怎么工作的。这篇文章并不做彻底的研究仅聚焦于您现阶段需要掌握的知识。—— MDN

事件即某个情况、某个事情。

  • 当按钮被点击
  • 视频播放、暂停
  • 关闭浏览器
  • 页面加载完毕
  • 调整浏览器窗口大小

上述情况都是事件。

1. DOM 事件

DOM 事件被发送用于通知代码相关的事情已经发生了。每个事件都是继承自Event 类的对象,可以包括自定义的成员属性及函数用于获取事件发生时相关的更多信息。事件可以表示从基本用户交互到渲染模型中发生的事件的自动通知的所有内容。—— MDN

DOM 事件是指给 DOM 节点在触发某个条件下要做的事情,如:当按钮被点击的时候改变背景色。

实例演示
预览 复制
复制成功!
<style>
  .change-bg {
    border: 1px solid black;
    height: 40px;
    width: 120px;
    border-radius: 2px;
    margin-top: 16px;
    outline: none;
    cursor: pointer;
  }

  .change-bg:active {
    background: #efefef;
  }

  .box {
    width: 120px;
    height: 120px;
    background: #4caf50;
    border-radius: 60px;
  }
</style>
<div class="box"></div>

<button class="change-bg">戳这里改变背景色</button>
<script>
  var boxEle = document.querySelector('.box');
  var btnEle = document.querySelector('.change-bg');

  // 随机生成一个颜色 具体实现可以不管
  function getColor() {
    return '#' + ('00000' + (Math.random() * 0x1000000 << 0).toString(16)).slice(-6);
  }

  btnEle.onclick = function() {
    boxEle.style.backgroundColor = getColor();
  };
</script>
运行案例 点击 "运行案例" 可查看在线运行效果

图片描述

如上述例子中按钮的 onclick 属性,当他被赋值一个函数的时,这个函数就会在按钮被点击的时候触发。

onclick 属性是一种事件处理器属性,表示单击或点击事件,当想指定按钮在被点击的时候要做的事情时,就可以给这个属性赋值。

赋值的函数通常被称为事件处理器,即事件被触发时候时候执行的代码块,部分文献中会称为事件处理程序。

通常给 DOM 节点设置事件的操作,会被称为绑定事件,上述例子就是给一个按钮绑定了点击事件。

绝大部分事件处理器属性都是以 on 开头的。

2. JavaScript 与 DOM 事件

DOM 事件是由DOM标准提供规范,浏览器对其进行具体实现的。绑定事件需要借助 DOM 提供的接口,然后由 JavaScript 提供事件处理器。

使用 JavaScript 来给 DOM 节点绑定事件有多种方式,都是由 DOM事件标准 提供的,具体可以参阅事件绑定章节。

3. 小结

事件可以理解为某个情况,如点击的时候、关闭的时候。这些情况下要做的事情,就是事件处理器(事件处理程序)。

DOM 事件是由 DOM 标准预先定义好的接口,由 JavaScript 提供事件处理器,来决定当事件被触发时要做的事情。

前置知识
什么是JavaScript 开发与学习环境准备 调试方案
基础
JavaScript 变量 JavaScript 数据类型 JavaScript if 语句 JavaScript for 语句 JavaScript 算数运算符 JavaScript 比较运算符 JavaScript 逻辑运算符 JavaScript 表达式 JavaScript 函数 JavaScript 对象 JavaScript 字符串 JavaScript 数字 JavaScript 数组 JavaScript switch 语句 JavaScript while 语句 JavaScript break与continue JavaScript with document.cookie
内置对象
JavaScript Function JavaScript Math JavaScript Date JavaScript RegExp JavaScript JSON
JavaScript 与 DOM
什么是DOM DOM和JavaScript的关系 获取和操作 DOM 节点 JavaScript DOM与事件 JavaScript DOM 事件绑定 JavaScript DOM 事件对象 JavaScript DOM 事件流 JavaScript DOM 事件优化 JavaScript DOM 自定义事件
表单处理
使用 JavaScript 校验表单
BOM
BOM window 对象 常用的 BOM 相关对象 BOM 常用属性和方法
AJAX
JavaScript AJAX
进阶知识
JavaScript 异常处理 JavaScript 三元运算符 JavaScript 逗号操作符 JavaScript void JavaScript typeof JavaScript delete JavaScript debugger JavaScript getter &setter JavaScript 原型 JavaScript new操作符和构造函数 JavaScript instanceof JavaScript this JavaScript 严格模式 JavaScript 作用域 JavaScript 闭包 JavaScript 变量提升 JavaScript 对象包装器
常用库
jQuery Lodash moment.js swiper
进阶指南
ECMAScript6 Node.js Babel CSS 预处理器 代码规范 TypeScript Web Components 小程序 Vue / React / Angular JavaScript 关键字
常见疑点与误区
分号问题 对象属性访问问题 this 使用问题 浮点数精度问题 独一无二的 NaN 避免全局污染 控制台观察对象问题 根据环境选择语言特性
扩展
相关资源