让javascript事件发挥更大的作用

前端

2023-10-28 20:36:23

javascript事件的使用姿势

javascript事件是一种用来处理用户交互的机制。当用户与网页上的元素进行交互时，就会触发对应的javascript事件。javascript事件可以用来实现各种各样的交互效果，比如按钮点击、鼠标移动、键盘输入等。

javascript事件分为两种类型：DOM事件和HTML事件。DOM事件是与文档对象模型(DOM)相关的事件，而HTML事件是与HTML元素相关的事件。

事件绑定

要使用javascript事件，首先需要将事件绑定到相应的元素上。事件绑定有两种方式：

直接绑定 ：直接在HTML元素中使用onclick、onmouseover等属性来绑定事件。
addEventListener()方法 ：使用addEventListener()方法来绑定事件。addEventListener()方法的第一个参数是事件类型，第二个参数是事件处理函数。

事件冒泡

事件冒泡是指当一个元素上的事件被触发时，该事件会逐级向上冒泡到其父元素、祖先元素，直到文档根元素。

事件捕获

事件捕获与事件冒泡相反，是指当一个元素上的事件被触发时，该事件会逐级向下捕获到其子元素、孙子元素，直到该元素本身。

事件委托

事件委托是一种优化事件处理的技巧。事件委托是指将事件绑定到父元素上，然后在事件处理函数中判断事件的实际目标元素，再根据目标元素来执行不同的操作。

事件流

事件流是指事件从触发元素到最终被处理的过程。事件流分为三个阶段：捕获阶段、目标阶段和冒泡阶段。

事件监听

事件监听是指在元素上设置事件监听器，当事件发生时，事件监听器就会被触发。

事件处理

事件处理是指在事件监听器中执行的代码。事件处理代码可以用来实现各种各样的交互效果。

事件传播

事件传播是指事件在事件流中的传播方式。事件传播有两种方式：事件冒泡和事件捕获。

实例

// 直接绑定
<button onclick="alert('Hello, world!')">点击我</button>

// addEventListener()方法
const button = document.getElementById('button');
button.addEventListener('click', function() {
  alert('Hello, world!');
});

// 事件委托
const parent = document.getElementById('parent');
parent.addEventListener('click', function(event) {
  const target = event.target;
  if (target.tagName === 'BUTTON') {
    alert('Hello, world!');
  }
});