JavaScript 事件处理

在 JavaScript 中，事件处理是一种重要的机制，用于响应用户的交互动作，比如点击、滚动、输入等。事件处理通常涉及以下几个方面：

1、事件监听器（Event Listeners）

 可以使用 addEventListener 方法来向元素添加事件监听器，以便在事件发生时执行指定的函数。

// 获取元素
let button = document.getElementById('myButton');
// 添加点击事件监听器
button.addEventListener('click', function() {
  console.log('Button clicked!');
});

2、内联事件处理器（Inline Event Handlers）

也可以直接在 HTML 元素的属性中指定事件处理函数，称为内联事件处理器。

<button onclick="handleClick()">Click me</button>
<script>
function handleClick() {
  console.log('Button clicked!');
}
</script>

3、事件对象（Event Object）

事件处理函数通常会接收一个事件对象作为参数，它包含有关事件的详细信息，如事件类型、发生的元素等。

let button = document.getElementById('myButton');
button.addEventListener('click', function(event) {
  console.log('Button clicked!');
  console.log('Event target:', event.target);
});

4. 常见事件类型

JavaScript 中常见的事件类型包括 click、mouseover、keydown、submit 等，可以针对不同的交互需求选择适当的事件类型进行处理。

let inputField = document.getElementById('myInput');
inputField.addEventListener('keydown', function(event) {
  console.log('Key pressed:', event.key);
});

5. 事件委托（Event Delegation）

事件委托是一种优化技术，利用事件冒泡的原理，将事件处理程序绑定到父元素而不是每个子元素上，以提高性能和管理性。

<ul id="myList">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>
<script>
let list = document.getElementById('myList');
list.addEventListener('click', function(event) {
  if (event.target.tagName === 'LI') {
    console.log('Clicked on:', event.target.textContent);
  }
});
</script>

6. 阻止事件默认行为和冒泡

有时需要阻止事件的默认行为（如表单提交的默认刷新页面行为）或停止事件冒泡到父元素。

let form = document.getElementById('myForm');
form.addEventListener('submit', function(event) {
  event.preventDefault(); // 阻止表单提交的默认行为
});

let button = document.getElementById('myButton');
button.addEventListener('click', function(event) {
  event.stopPropagation(); // 阻止事件冒泡
});

事件处理是 JavaScript 中与用户交互最直接的方式之一，通过事件监听器和处理函数，可以实现对用户输入和操作的响应，从而使网页和应用程序更加动态和交互。事件处理还涉及事件对象、事件类型的选择、事件委托等技术，这些都是开发中常用的技能和概念。

常见的 HTML 事件

事件	描述
onchange	HTML 元素已被改变
onclick	HTML 元素已被改变
onmouseover	户把鼠标移动到 HTML 元素上
onmouseout	用户把鼠标移开 HTML 元素
onkeydown	用户按下键盘按键
onload	浏览器已经完成页面加载