DOM元素绑定js事件的三种方式?

DOM元素绑定JavaScript事件有三种常见的方式：

1. HTML属性绑定：可以直接在HTML标签中使用事件属性来绑定事件，如onclick、onmouseover等。例如：

<button onclick="myFunction()">Click me</button>

在这个例子中，当按钮被点击时，myFunction()函数会被调用。

2. DOM元素属性绑定：可以通过JavaScript代码在DOM元素的属性上直接绑定事件处理程序。例如：

const button = document.getElementById('myButton');
button.onclick = function() {
  // 事件处理程序
};

在这个例子中，使用onclick属性将一个函数绑定到button元素的点击事件上。

3. addEventListener方法绑定：可以使用addEventListener方法来为DOM元素添加事件监听器。这种方式更加灵活，可以绑定多个事件处理程序，并且支持事件的捕获和冒泡阶段。例如：

const button = document.getElementById('myButton');
button.addEventListener('click', function() {
  // 事件处理程序
});

在这个例子中，使用addEventListener方法将一个函数绑定到button元素的点击事件上。

需要注意的是，使用HTML属性绑定和DOM元素属性绑定的方式只能绑定一个事件处理程序，并且后续的绑定会覆盖前面的绑定。而使用addEventListener方法可以多次调用，可以绑定多个事件处理程序。

在现代的Web开发中，推荐使用addEventListener方法来绑定事件，因为它具有更好的灵活性和扩展性。