## 冒泡事件和捕获事件
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中的事件分类多种多样,本文只是简单的列举了几种常用的事件类型和实例。在日常开发中,我们应根据实际需求,合理选择不同的事件类型来处理对应的操作。