DOM 与事件-知识专区-汉码未来

当前位置：前端开发 > 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