DOM事件绑定

文章目录

1.事件绑定

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

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

2.直接在 HTML 上提供事件

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

<style>.box{width: 100px;height: 100px;background: green;}</style><divclass="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><buttonclass="btn">
        我是一个可以点击的按钮
      </button><script>var btn = document.querySelector('.btn');
      
        btn.onclick=function(){var text = btn.innerText;
      
          btn.innerText = text.replace('我是一个可以点击的按钮','看到我就知道你已经点过了');};</script>

在没有点击这个按钮之前运行结果是这样的

点击完成之后是这样的

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

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

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

4.小结

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