章节索引 :

DOM 事件绑定

DOM 提供了许多事件供开发者进行绑定,以响应各种操作,丰富页面交互。

想要触发事件,就得先给 DOM 节点绑定事件,提供事件处理器。

1. 直接在 HTML 上提供事件

这种方式是将事件内联在 HTML 代码中。

实例演示
预览 复制
复制成功!
<style>
  .box {
    width: 100px;
    height: 100px;
    background: green;
  }
</style>

<div class="box" onclick="alert('耶耶耶耶耶!')"></div>
运行案例 点击 "运行案例" 可查看在线运行效果

图片描述

通过设置 HTML 的 onclick 属性,可以绑定点击事件,属性内可以写简单的 JavaScript 代码。

但是可以看到这种方式是有局限性的,写大量的 JavaScript 代码在里面肯定是不合理的。

过去网页的交互相对较少,会在 body 标签上绑定 onload 事件,即页面加载完毕后做的事情。

实例演示
预览 复制
复制成功!
<script>
  function load() {
    alert('页面加载完毕啦!');
  }
</script>
<body onload="load()">
  <div>我是一段滥竽充数文案。</div>
</body>
运行案例 点击 "运行案例" 可查看在线运行效果

onload="load()" 即表示在页面加载完成后,执行 load 函数。现在翻阅部分文献,依然能够看到这种写法。

2. 设置事件处理器属性

通过事件处理器属性设置绑定事件,需要先获取到 DOM 节点。

实例演示
预览 复制
复制成功!
<style>
  .btn {
    border: 1px solid #4caf50;
    font-size: 22px;
    padding: 8px 12px;
    color: #4caf50;
    outline: none;
  }
  .btn:active {
    background: #eee;
  }
</style>

<button class="btn">
  我是一个可以改变一切的按钮
</button>

<script>
  var btn = document.querySelector('.btn');

  btn.onclick = function() {
    var text = btn.innerText;

    btn.innerText = text.replace('一切', '世界');
  };
</script>
运行案例 点击 "运行案例" 可查看在线运行效果

图片描述

通过 onclick 就可以设置按钮的点击事件。

如果需要清除事件,可以重新将属性重新设置为 null

实例演示
预览 复制
复制成功!
<style>
  .btn {
    border: 1px solid #4caf50;
    font-size: 14px;
    padding: 8px 12px;
    color: #4caf50;
    outline: none;
  }
  .btn:active {
    background: #eee;
  }
  
  p {
    font-size: 22px;
  }
</style>


<button class="btn">
  我是一个可以改变一切的按钮
</button>

<p>1</p>

<script>
  var btn = document.querySelector('.btn');
  var p = document.querySelector('p');
  var total = 1;

  btn.onclick = function() {
    p.innerText = ++total;

    if (total >= 5) {
      btn.onclick = null;
    }
  };
</script>
运行案例 点击 "运行案例" 可查看在线运行效果

这种绑定事件的方式依然常用,各种文献的 demo 也会采用这种方式,但缺点是同一个事件在没有其他辅助条件下,只能绑定一个事件处理器。

3. 使用 element.addEventListener 绑定事件

使用 DOM 节点的 addEventListener 方法也可以绑定事件。

实例演示
预览 复制
复制成功!
<style>
  .btn {
    border: 1px solid #4caf50;
    font-size: 14px;
    padding: 8px 12px;
    color: #4caf50;
    outline: none;
  }
  .btn:active {
    background: #eee;
  }

  input {
    padding: 10px 12px;
    font-size: 14px;
    outline: none;
  }
  
  p {
    font-size: 22px;
  }
</style>


<input type="text">

<button class="btn">
  按钮
</button>

<p>1</p>

<script>
  var btn = document.querySelector('.btn');
  var input = document.querySelector('input');
  var p = document.querySelector('p');

  var total = 1;

  btn.addEventListener('click', function() {
    input.value = input.value.split('').reverse().join('');
    btn.value = input.value;
    p.innerText = input.value;
  });

  input.addEventListener('keyup', function() {
    btn.innerText = input.value;
  });
</script>
运行案例 点击 "运行案例" 可查看在线运行效果

图片描述

addEventListener 的第一个参数是事件类型,和使用事件处理器属性HTML内联事件不同,这个方法的事件类型不需要 on 前缀。

第二个参数就是事件处理器,即触发事件时要做的事情。

使用 addEventListener 可以绑定多个事件处理器。

实例演示
预览 复制
复制成功!
<style>
  .btn {
    border: 1px solid #4caf50;
    font-size: 14px;
    padding: 8px 12px;
    color: #4caf50;
    outline: none;
  }
  .btn:active {
    background: #eee;
  }
</style>

<button class="btn">
  按钮
</button>
<p></p>

<script>
  var btn = document.querySelector('.btn');
  var p = document.querySelector('p');
  var total = 1;

  btn.addEventListener('click', function() {
    btn.innerText = ++total;
  });

  btn.addEventListener('click', function() {
    p.innerText = total;
  });
</script>
运行案例 点击 "运行案例" 可查看在线运行效果

一个事件绑定多个事件处理器,其执行顺序是按照绑定顺序来的。

如果需要去除事件,可以使用 removeEventListener 方法。

实例演示
预览 复制
复制成功!
<style>
  .btn {
    border: 1px solid #4caf50;
    font-size: 14px;
    padding: 8px 12px;
    color: #4caf50;
    outline: none;
  }
  .btn:active {
    background: #eee;
  }
</style>

<button class="btn">
  按钮
</button>

<script>
  var btn = document.querySelector('.btn');
  var total = 1;

  function fn() {
    btn.innerText = ++total;

    if (total > 5) {
      btn.removeEventListener('click', fn);
    }
  }

  btn.addEventListener('click', fn);
</script>
运行案例 点击 "运行案例" 可查看在线运行效果

使用 removeEventListener 去除事件,需要传递指定的事件,且事件处理器必须与绑定事件传入的一样,为同一个。

addEventListener 与 removeEventListener 还具有第三个参数,会在事件流章节进行讨论。

IE8及以下都不支持该方法,需要使用IE提供的 attachEvent 与 detachEvent 来处理事件

4. DOM 事件级别

目前常讨论的 DOM 级别有 4 级,为 DOM 0级DOM 3级,这里的可以理解成标准的版本。

这 4 级内容中, DOM 1级没有提供事件相关的内容,所以不会拿来讨论,因此 DOM 事件就被分为了常说的 DOM 0级事件DOM 2级事件DOM 3级事件

  • DOM 0级 提供的事件绑定方式为在HTML 上内联事件事件处理器属性
  • DOM 2级 提供了 addEventListenerremoveEventListener 方法。
  • DOM 3级 则是在 2 级的基础上进行了扩充,添加了更多的事件类型。

事实上 DOM 0级事件并不是标准中的,在 W3C 制定 DOM 标准前,部分浏览器已经有了 DOM 模型,也有自己相应的事件,这些出现在标准第一个版本之前的,就被称为了 DOM 0

5. 小结

绑定 DOM 事件可以通过以下三种方式:

  1. 将事件内联在 HTML 中
  2. 使用 事件处理器属性 绑定事件
  3. 使用 addEventListenerremoveEventListener 处理事件

前两种方式不能绑定多个事件处理器,三种绑定方式由不同版本的 DOM 标准提供,通常使用 DOM 级别进行区分。

前置知识
什么是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 避免全局污染 控制台观察对象问题 根据环境选择语言特性
扩展
相关资源