Javascript DOM事件操作小结(监听鼠标点击、释放，悬停、离开等)

下面我将详细讲解 Javascript DOM 事件操作的小结，主要包括监听鼠标点击、释放，悬停、离开等事件的监听方式和应用场景。

什么是DOM事件

DOM事件是用户与网页交互的过程中所产生的一些行为，包括鼠标点击、释放，鼠标悬停、离开，键盘按键等，通过监听这些事件可以实现很多网页的交互效果。

DOM事件的三个阶段

在浏览器页面中，DOM事件的整个过程可以被分为三个阶段：

1. 捕获阶段：事件从DOM树的根节点向下传导，直到在目标元素上捕获到了事件。
2. 目标阶段：事件在目标元素上触发。
3. 冒泡阶段：事件从目标元素向上冒泡，直到传递到DOM树的根节点。

DOM事件的默认行为是在目标阶段触发，这就意味着在监听事件时需要通过第三个参数来控制事件是否在捕获阶段或冒泡阶段进行监听。

监听 DOM 事件

可以使用 addEventListener 方法来监听 DOM 事件，该方法接收两个参数：

1. 事件类型，如 "click"、"mouseover" 等。
2. 事件触发时所执行的回调函数。

下面是一个监听鼠标悬停、离开事件的示例：

const targetElem = document.getElementById("target");
targetElem.addEventListener("mouseover", () => {
  console.log("鼠标移入目标元素");
});
targetElem.addEventListener("mouseout", () => {
  console.log("鼠标移出目标元素");
});

在该示例中，使用 getElementById 方法获取 id 为 "target" 的元素，然后分别监听该元素的 "mouseover" 和 "mouseout" 事件，通过回调函数打印相关信息。

阻止默认行为和事件传播

在监听 DOM 事件过程中，有时候需要阻止事件的默认行为或阻止事件的传播。可以在回调函数中使用 event.preventDefault() 方法来阻止事件的默认行为，如下所示：

const linkElem = document.getElementById("link");
linkElem.addEventListener("click", (event) => {
  event.preventDefault(); // 阻止默认行为
  console.log("链接被点击");
});

在该示例中，使用 getElementById 方法获取 id 为 "link" 的元素，然后监听该元素的 "click" 事件，在回调函数中使用 preventDefault() 方法来阻止链接的跳转。

同样地，可以使用 event.stopPropagation() 方法来阻止事件的传播，即使事件在目标元素处被阻止，也不会继续向上传播。如：

const parentElem = document.getElementById("parent");
const childElem = document.getElementById("child");
parentElem.addEventListener("click", () => {
  console.log("父元素被点击");
});
childElem.addEventListener("click", (event) => {
  event.stopPropagation(); // 阻止事件冒泡
  console.log("子元素被点击");
});

在该示例中，使用 getElementById 方法获取 id 为 "parent" 和 "child" 的两个元素，然后分别在父元素和子元素上监听 "click" 事件，在子元素的回调函数中使用 stopPropagation() 方法来阻止事件的冒泡，只执行子元素的回调函数。

以上就是 Javascript DOM 事件操作的小结，可以通过监听 DOM 事件实现网页交互效果，同时可以对事件的默认行为和传播进行控制。