您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

DOM 与事件

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

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

上述情况都是事件。

DOM 事件被发送用于相关的事情已经发生了。每个事件都是继承自Event 类的对象,可以的成员及用于事件发生时相关的更多信息。事件可以表示从基本交互到渲染模型中发生的事件的的所有。—— MDN

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

<style>
  .change-bg {
    border: px solid black;
    height: px;
    width: px;
    border-radius: px;
    margin-top: px;
    outline: none;
    cursor: pointer;
  }

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

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

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

  // 颜色 具体实现可以不管
  function getColor() {
    return '#' + ('00000' + (Math.random() *  << ).toString()).slice(-);
  }

  btnEle.onclick = function() {
    @R_208_2@Ele.style.backgroundColor = getColor();
  };
</script>

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

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

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

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

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

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

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

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

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


联系我
置顶