Javascript事件分类列举

发布时间：2025-01-09 以下文章来源于网友投稿，内容仅供参考！

前端开发中，事件是非常重要的一部分，Javascript中的事件分类不同，每一种分类都有它的特殊性质，因此在编写前端程序时我们需要对事件有一定的了解。本文将针对Javascript事件分类，进行一个简单的介绍。
## 冒泡事件和捕获事件
Javascript中的事件可以分为两类，分别是冒泡事件和捕获事件。所谓冒泡事件，就是一个事件发生后，它会从最深层次的节点开始向外层级别的节点传递，直到最外层的节点为止。相反，捕获事件就是从最外层的节点开始往里传递，直到最深层的节点为止。
我们可以通过addEventListener()方法给元素添加事件监听器，看下面这个例子：



<p id="test">这是一个测试文本。</p>
<script>
var test = document.querySelector("#test");
test.addEventListener("click", function(event){
console.log("Clicked!");
});
</script>

在这个例子中，我们给id为“test”的元素添加了一个点击事件监听器。当我们在页面中进行点击操作时，点击事件会从点击位置开始向上冒泡，最终到达id为“test”的元素，触发点击事件监听器中的代码。
如果你想要使用捕获事件，可以这样写：



<p id="test">这是一个测试文本。</p>
<script>
var test = document.querySelector("#test");
test.addEventListener("click", function(event){
console.log("Clicked!");
}, true);
</script>

这里我们在addEventListener()方法的第三个参数中设置了一个布尔值true，表示我们希望该事件使用捕获方式而不是默认的冒泡方式。
## 鼠标事件
Javascript中的鼠标事件相对比较常用，鼠标事件包括以下几种：click、dblclick、mousedown、mouseup、mousemove、mouseover、mouseout等。我们来举例说明：



<p id="test">这是一个测试文本。</p>
<script>
var test = document.querySelector("#test");
test.addEventListener("click", function(event){
console.log("Clicked!");
});
test.addEventListener("dblclick", function(event){
console.log("Double Clicked!");
});
test.addEventListener("mousedown", function(event){
console.log("Mouse Down!");
});
test.addEventListener("mouseup", function(event){
console.log("Mouse Up!");
});
test.addEventListener("mousemove", function(event){
console.log("Mouse Move!");
});
test.addEventListener("mouseover", function(event){
console.log("Mouse Over!");
});
test.addEventListener("mouseout", function(event){
console.log("Mouse Out!");
});
</script>

这里我们给id为“test”的元素分别添加了七个不同的事件监听器，分别监听鼠标单击、双击、按下、松开、移动、悬停、离开等事件。每当我们在页面中进行相关操作时，对应的事件监听器中的代码就会被执行。
## 键盘事件
键盘事件也是Javascript中常用的一种事件类型，主要包括keydown、keyup、keypress等。我们来看一个例子：



<p id="test">这是一个测试文本。</p>
<script>
var test = document.querySelector("#test");
test.addEventListener("keydown", function(event){
console.log("Key Down!");
});
test.addEventListener("keyup", function(event){
console.log("Key Up!");
});
test.addEventListener("keypress", function(event){
console.log("Key Press!");
});
</script>

我们给id为“test”的元素添加三个不同的事件监听器，分别监听键盘按下、松开、按下并松开等事件。每当在页面中进行相关键盘操作时，对应的事件监听器中的代码就会被执行。
## 表单事件
表单事件主要用于处理表单数据提交的情况，包括submit、reset等事件。我们来看一个例子：



<form id="test-form">
<input type="text" id="test-input">
<button type="submit">提交</button>
</form>
<script>
var testForm = document.querySelector("#test-form");
testForm.addEventListener("submit", function(event){
event.preventDefault();
console.log("Form Submitted!");
});
testForm.addEventListener("reset", function(event){
event.preventDefault();
console.log("Form Reset!");
});
</script>

在这个例子中，我们给一个表单元素添加了两个事件监听器，分别监听提交和重置表单事件。在监听器中，我们使用了event.preventDefault()方法来阻止表单默认的行为。
## 总结
Javascript中的事件分类多种多样，本文只是简单的列举了几种常用的事件类型和实例。在日常开发中，我们应根据实际需求，合理选择不同的事件类型来处理对应的操作。