全国协议5人面授小班,企业级独立开发考核,转业者的IT软件工程师基地 登录/注册 | 如何报名
当前位置: 前端开发   >  DOM 与事件
admin · 更新于 2021-08-06

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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
运行案例点击 "运行案例" 可查看在线运行效果

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

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

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

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

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

2. JavaScript 与 DOM 事件

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

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

3. 小结

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

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


为什么选择汉码未来