js事件(Event)知识整理

JavaScript 事件(Event)知识整理

本文将介绍JavaScript中的事件(Event)知识，主要内容包括事件类型、事件绑定、事件传播、事件代理等。

事件类型

JavaScript中的事件类型比较多，常见的事件类型如下：

• 点击事件：click
• 双击事件：dblclick
• 鼠标移动事件：mousemove
• 键盘按下事件：keydown
• 页面加载事件：load
• 表单提交事件：submit
• ...

事件绑定

我们可以使用addEventListener()方法来绑定事件。该方法的参数包括事件类型、事件处理函数等。示例代码如下：

var button = document.querySelector("#myButton");
button.addEventListener("click", function() {
  console.log("Button clicked!");
});

事件传播

JavaScript的事件传播分为三个阶段：事件捕获阶段、目标阶段和事件冒泡阶段。事件默认是从外向内传播，即从根节点到目标节点（事件捕获），然后再从目标节点向外传播（事件冒泡）。我们可以使用event.stopPropagation()方法停止事件传播。示例代码如下：

var outer = document.querySelector("#outer");
var inner = document.querySelector("#inner");
var button = document.querySelector("#myButton");

outer.addEventListener("click", function() {
  console.log("Outer clicked!");
});

inner.addEventListener("click", function() {
  console.log("Inner clicked!");
});

button.addEventListener("click", function(event) {
  console.log("Button clicked!");
  event.stopPropagation();
});

事件代理

事件代理就是利用事件冒泡，只在父节点上绑定事件，而不是在子节点上单独绑定事件。这样可以减少事件绑定的次数，提高性能。示例代码如下：

var ul = document.querySelector("#myList");

ul.addEventListener("click", function(event) {
  if (event.target.tagName === "LI") {
    console.log("List item clicked: " + event.target.textContent);
  }
});

在上述示例中，我们只需要在ul节点上绑定事件，并通过判断event.target的tagName来判断点击的是哪个li节点。

总结

本文简要介绍了JavaScript中的事件知识，包括事件类型、事件绑定、事件传播、事件代理等。通过深入了解这些知识，可以写出更加优秀的JavaScript代码。