怎么给元素添加事件？JS绑定事件三种方式解析-猿码集

1. JS绑定事件的三种方式

在前端开发中，我们经常需要为网页元素绑定事件，比如：点击事件、鼠标移入移出事件等。JavaScript中有三种方式可以给元素添加事件，它们分别是：

HTML事件处理程序

DOM0级事件处理程序

DOM2级事件处理程序

通过在HTML标签中添加 "on"开头的属性，实现事件的绑定。比如:

<button onclick="alert('hello world')">点击我</button>

这是一个简单的例子，当点击按钮时，浏览器会弹出一个警告框。

HTML事件处理程序的优点是简单易用，缺点也很明显，它与HTML标签和JavaScript代码紧密耦合，导致难以维护和管理。HTML事件处理程序只适合处理简单的事件，不适合处理复杂的事件。

DOM0级事件处理程序通过在JavaScript代码中为元素添加事件处理程序，实现事件的绑定。如下代码：

var btn = document.getElementById('btn'); 
btn.onclick = function() { 
alert('hello world'); 
};

这段代码获取了一个id为 "btn" 的元素，然后将点击事件绑定到这个元素上。DOM0级事件处理程序将点击事件绑定到元素的属性上，可以使用 "btn.onclick=null" 来解除事件绑定。

DOM0级事件处理程序需要注意的一点是，同一个元素只能绑定一个事件处理程序。如果多次给同一个元素绑定事件处理程序，后面的处理程序将会覆盖前面的处理程序。

DOM2级事件处理程序通过在JavaScript代码中为元素添加事件监听函数，实现事件的绑定。如下代码：

var btn = document.getElementById('btn'); 
btn.addEventListener('click',function(){ 
    alert('hello world'); 
},false);

这段代码获取了一个id为 "btn" 的元素，然后给它添加了一个点击事件监听函数。DOM2级事件处理程序将事件处理程序作为函数添加到元素的事件流中，可以给同一个元素添加多个事件处理程序。

DOM2级事件处理程序与DOM0级事件处理程序相比，具有更好的扩展性和可维护性。它还可以对事件进行捕获和冒泡，实现更为复杂的操作。需要注意的一点是，如果要移除通过addEventListener()添加的事件处理程序，需要使用removeEventListener()方法。

针对不同的开发需求，我们可以选择不同的事件处理程序。

HTML事件处理程序和DOM0级事件处理程序的支持性非常好，在大部分浏览器中可以正常使用。如果你的主要用户群体是老旧的浏览器用户，或者你需要在一些特定的设备上运行，那么选择HTML事件处理程序或DOM0级事件处理程序是一个不错的选择。

DOM2级事件处理程序支持对事件的捕获和冒泡，可以实现更加复杂的操作。如果你需要监听多个事件，或者需要对事件进行更为精细的控制，那么选择DOM2级事件处理程序是一个不错的选择。

给元素添加事件是前端开发必不可少的基础操作。本文介绍了JavaScript中给元素添加事件的三种方式，包括HTML事件处理程序、DOM0级事件处理程序和DOM2级事件处理程序。同时，我们还介绍了如何选择事件处理程序，根据不同的需求选择不同的事件处理程序。

深入学习JavaScript的事件处理需要了解事件的捕获和冒泡、事件对象、事件委托等相关知识，这些内容将在后续的文章中介绍。