DOM事件绑定

1.事件绑定

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

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

2.直接在 HTML 上提供事件

这种方式是直接将事件内联在html代码中

<style>
        .box {
            width: 100px;
            height: 100px;
            background: green;
        }
    </style>

    <div class="box" onclick="alert('我是点击事件')"></div>

代码在html中生成一块绿色区域，点击这块区域就会生成一个页面提醒，图片如下

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

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

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

3.设置事件处理器属性

通过事件处理器属性设置绑定事件，需要先获取到 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。

这种绑定事件的方式依然常用，但缺点是同一个事件在没有其他辅助条件下，只能绑定一个事件处理器。

4.小结

这两种方式都可以绑定DOM事件，但是都只能绑定一个事件处理器。