javascript event监听

JavaScript Event监听

JavaScript Event监听是处理Web应用程序中用户交互和其他操作的一种强大方式。在本文中，我们将探索JavaScript Event监听的基本操作和实现。

Event监听机制可以帮助我们监控以及检测到用户的行为，例如点击链接，提交表单和鼠标移动等等。然后，我们就可以针对这些事件做出特定的动作或反应。以一个简单的示例为例：

let button = document.querySelector("button");
button.addEventListener("click", function() {
console.log("双击确认");
});

上述代码会监听在按钮被点击的时，会 console.log("双击确认")。 addEventListener()是用于注册事件处理程序的函数。在这个例子中，我们注册了一个单击事件，它会执行一个简单的 JavaScript 函数。

除了button上的click，DOM上总共有68个事件可以监听，这个包括click, dblclick ，mouseover, mouseleave等等。我们触发一些事件的时候，还可以将事件传递给它们的父元素和子元素。例如，当单击按钮时，也可以通过将事件传递到button的父元素来触发父级事件。

我们可以将时间向其他元素传递，比如阻止事件从父元素触发到子元素：

function buttonClicked(event) {
event.stopPropagation();
console.log("Button is clicked");
}
function divClicked() {
console.log("Div is clicked");
}
document.querySelector("button").addEventListener("click", buttonClicked);
document.querySelector("div").addEventListener("click", divClicked);

在上面这个例子中，一个单击事件监听器添加到 button 元素上，通过buttonClicked()函数来捕捉单击事件。但是，div也有单击事件监听，并且在单击事件触发时，会执行 divClicked() 函数。由于 “button” 元素是 div 元素的子元素，因此在单击 "Button" 时，它也会立即触发 div 元素的事件。通过使用 stopPropagation() 方法，我们可以阻止单击事件向上传递到 div 元素。

Event监听非常有用，但是有一个潜在的问题：在注册事件监听器之前，如果我们尝试在DOM节点上查找一个元素并注册事件，当我们从屏幕中删除该节点时，事件监听器一直挂在该节点上。这时，必须手动删除所有事件监听器，否则它们将继续保持存在并浪费浏览器的内存。

因此，在删除元素之前，请始终删除它上的所有事件监听器。例如，在使用appendChild()方法添加元素并在之后删除时，最好删除附加的元素：

let button1 = document.querySelector("button");
let container = document.querySelector("div");
function addNewButton() {
let newButton = document.createElement("button");
newButton.textContent = "Click me too";
newButton.addEventListener("click", function() {
console.log("New button is clicked");
});
container.appendChild(newButton);
}
function removeNewButton() {
let newButton = document.querySelector("button:nth-child(2)");
newButton.remove();
}
button1.addEventListener("click", addNewButton);
button1.addEventListener("click", removeNewButton);

在这个例子中，我们创建了一个新按钮，它被添加到现有的div元素中。然后，我们向该新按钮添加一个事件监听器。最后，我们在另一个事件监听器中使用 remove()方法来删除该按钮。在这个例子中，我们可以轻松地保持 DOM 的干净，并消除浏览器内存泄漏的风险。

通过 JavaScript Event监听，我们能够在用户在浏览器中交互的不同情况下，获得更好的控制权。 Event监听使得我们能够更好地掌控页面的交互，正因为如此，在处理用户事件的过程中充分运用 Event监听是非常重要的。