JS绑定事件的三种方式|极客笔记

JS绑定事件的三种方式

在前端开发中，经常会涉及到需求如点击按钮弹出对话框、鼠标悬停显示提示信息等操作，这些操作都需要通过绑定事件来实现。JavaScript提供了多种绑定事件的方式，本文将详细介绍常见的三种方式：HTML事件属性、DOM0级事件处理程序和DOM2级事件处理程序。

HTML事件属性

HTML事件属性是最简单的一种方式，通过在HTML标签中直接定义事件属性来绑定事件。比如在按钮上绑定点击事件：

<button onclick="showMessage()">点击我</button>

这里我们在button标签上加上了onclick事件，当用户点击按钮时会执行showMessage函数。

使用HTML事件属性的优点是简单直接，适用于一些简单的交互场景。但是缺点也很明显，与HTML混合，不易维护，在开发复杂页面时会显得混乱不堪。

DOM0级事件处理程序

DOM0级事件处理程序是通过JavaScript代码来绑定事件，与HTML事件属性相比更加灵活和独立。我们可以通过获取元素并为其绑定事件处理函数来实现。

<button id="btn">点击我</button>

<script>
  var btn = document.getElementById('btn');
  btn.onclick = function() {
    showMessage();
  };
</script>

在这段代码中，我们先通过getElementById方法获取到按钮元素，然后给该元素的onclick事件赋值为一个函数。当用户点击按钮时，会执行showMessage函数。

DOM0级事件处理程序的优点是可以与JavaScript代码分离开来，避免了与HTML混合的问题。但是缺点是每个事件只能绑定一个处理函数，且会被后续同类型事件覆盖。

DOM2级事件处理程序

DOM2级事件处理程序是目前应用最广泛的一种事件绑定方式，它是一种标准的事件绑定方法。可以为同一个事件绑定多个处理函数，且不会被后续同类型事件覆盖。

<button id="btn">点击我</button>

<script>
  var btn = document.getElementById('btn');
  btn.addEventListener('click', function() {
    showMessage();
  });

  btn.addEventListener('click', function() {
    console.log('Hello World!');
  });
</script>

在这段代码中，我们使用addEventListener方法为按钮元素绑定了两个click事件处理函数。当用户点击按钮时，会先执行showMessage函数，然后再执行打印’Hello World!’。

DOM2级事件处理程序的优点是不会被后续事件覆盖、易于维护，适用于大多数事件绑定场景。但是它不兼容IE8及以下版本，如果需要兼容这些老版本浏览器，还需要额外做处理。

综上所述，HTML事件属性、DOM0级事件处理程序和DOM2级事件处理程序是前端开发中常用的事件绑定方式。根据实际情况选择适合的方法来实现相应的交互功能，可以提高开发效率并提升用户体验。