JavaScript DOM 添加事件

JavaScript DOM 添加事件的完整攻略如下：

1. 确认要添加事件的HTML元素

在JavaScript中，我们首先需要确认要给哪个HTML元素添加事件。这个HTML元素可以是任何一个有效的DOM元素，比如一个按钮，一个输入框，一个复选框等等。我们可以使用DOM选择器（getElementById()、querySelector()等）去获取这个HTML元素，例如：

// 通过id获取button元素
const button = document.getElementById('myButton');

2. 创建事件处理程序函数

在确定好要添加事件的HTML元素后，我们需要创建一个事件处理程序函数。这个函数主要用来处理用户事件（例如，单击、鼠标移动等）的响应。事件处理程序通常会访问事件对象，例如获取关键的事件信息（例如，单击的位置，或者键盘按键的名称）。示例代码如下：

function handleClick(event) {
    // 在控制台输出一条消息
    console.log('Button was clicked!');
}

3. 添加事件监听器

有了要添加事件的HTML元素和对应的事件处理程序函数，我们就可以添加事件监听器了。在JavaScript中，我们可以使用addEventListener()方法来实现。此方法需要两个参数：要监听的事件类型和事件处理程序函数。示例代码如下：

// 监听button元素上的click事件
button.addEventListener('click', handleClick);

需要注意的是，如果要在添加事件监听器后，再次添加相同事件类型的监听器，则它们将按照添加的顺序依次执行。

另外，我们可以给任何一个元素添加多个不同类型的事件监听器，例如在上面的示例中，我们还可以添加鼠标移动事件的监听器：

function handleMouseMove(event) {
  // 获取鼠标移动的坐标
  const x = event.clientX;
  const y = event.clientY;
  console.log(`Mouse moved to (${x}, ${y})`);
}

button.addEventListener('mousemove', handleMouseMove);

示例1：事件监听器的简单使用

HTML代码如下，创建了一个<button>标签，并设定其id为myButton，用于事件绑定：

<button id="myButton">Click Me</button>

JavaScript代码如下，对该button的click事件添加handleClick函数进行监听：

const button = document.getElementById('myButton');

function handleClick(event) {
  console.log('Button was clicked!');
}

button.addEventListener('click', handleClick);

当我们在浏览器中单击按钮时，控制台会输出“Button was clicked!”的信息。

示例2：为多个元素同时添加事件监听器

HTML代码如下，创建了三个<button>标签，同样设定其class为buttons：

<button class="buttons">Button 1</button>
<button class="buttons">Button 2</button>
<button class="buttons">Button 3</button>

JavaScript代码如下，对按钮们的click事件添加同一个函数handleClick进行监听：

const buttons = document.getElementsByClassName('buttons');

function handleClick(event) {
  const buttonText = event.target.textContent;
  console.log(`Button "${buttonText}" was clicked!`);
}

for (let i=0; i<buttons.length; i++) {
  buttons[i].addEventListener('click', handleClick);
}

当我们在浏览器中单击任意一个按钮时，控制台会输出相应的信息，例如“Button 1 was clicked!”、“Button 2 was clicked!”等。