JS事件入門：新手必讀指南
概述
本文将详细介绍JS事件的基础概念，包括事件基础、处理机制、事件处理函数、事件对象的属性和方法，以及通过实际案例解析如何应用这些知识。通过学习这些内容，读者可以更好地理解和使用JS事件，实现更复杂的交互逻辑。
JS事件入门：新手必读指南 JS事件基础概念事件监听
事件监听是指为网页元素绑定事件处理函数。当指定的事件发生时，浏览器会自动调用绑定的函数。这允许我们响应用户的行为并作出相应的操作。
示例代码
// 获取元素
var button = document.getElementById('myButton');
// 绑定事件处理函数
button.addEventListener('click', function() {
console.log('按钮被点击了！');
});
// 等效的jQuery写法
$('#myButton').click(function() {
console.log('按钮被点击了！');
});事件绑定
事件绑定涉及将事件处理函数与特定事件类型绑定在一起，以便在该事件发生时执行函数。可以使用addEventListener方法或attachEvent（用于IE8及更早版本）进行绑定。
示例代码
var button = document.getElementById('myButton');
// 使用addEventListener绑定事件
button.addEventListener('click', function() {
console.log('按钮被点击了！');
});
// 使用attachEvent绑定事件（仅适用于IE8及更早版本）
// button.attachEvent('onclick', function() {
// console.log('按钮被点击了！');
// });创建事件处理函数
事件处理函数是当指定事件发生时执行的函数。函数可以是匿名函数、普通函数或箭头函数。
示例代码
// 匿名函数
document.getElementById('myButton').addEventListener('click', function() {
console.log('按钮被点击了！');
});
// 普通函数
function handleClick() {
console.log('按钮被点击了！');
}
document.getElementById('myButton').addEventListener('click', handleClick);
// 箭头函数
const handleArrowClick = () => {
console.log('按钮被点击了！');
};
document.getElementById('myButton').addEventListener('click', handleArrowClick);调用事件处理函数
当事件发生时，浏览器会自动调用绑定的事件处理函数。需要注意的是，函数调用时会传递一个event对象，该对象包含了有关事件的信息。
示例代码
document.getElementById('myButton').addEventListener('click', function(event) {
console.log('按钮被点击了！');
console.log('鼠标点击事件类型：', event.type);
console.log('触发该事件的目标元素:', event.target);
});事件对象的属性
事件对象提供了关于事件的重要信息，包括事件类型、触发事件的目标元素、键盘按键代码等。以下是一些常用的事件对象属性：
type：事件类型，如click、keydown等。target：触发事件的目标元素。currentTarget：当前正在处理事件的元素。keyCode：键盘事件中按下的键的编码。altKey、ctrlKey、shiftKey：分别表示Alt、Ctrl、Shift键是否被按下。
示例代码
document.getElementById('myButton').addEventListener('click', function(event) {
console.log('事件类型:', event.type);
console.log('目标元素:', event.target);
console.log('当前处理元素:', event.currentTarget);
console.log('鼠标点击坐标:', event.clientX, event.clientY);
});
document.addEventListener('keydown', function(event) {
console.log('按下了键:', event.keyCode);
console.log('Alt键是否按下:', event.altKey);
});事件对象的方法
事件对象还提供了一些方法，用于阻止事件的默认行为、阻止事件在捕获或冒泡阶段传播等。
preventDefault()：阻止浏览器执行默认行为，如链接跳转。stopPropagation()：阻止事件在捕获或冒泡阶段传播。stopImmediatePropagation()：阻止事件在捕获或冒泡阶段传播，并阻止其他事件处理函数的调用。preventDefault()与stopPropagation()的区别在于，preventDefault仅阻止默认行为，而stopPropagation阻止事件传播。
示例代码
document.getElementById('myButton').addEventListener('click', function(event) {
event.preventDefault(); // 阻止默认行为
event.stopPropagation(); // 阻止事件传播
console.log('阻止了默认行为和事件传播');
});
document.addEventListener('click', function(event) {
console.log('事件在捕获阶段被触发');
if (event.target.tagName === 'A') {
event.preventDefault(); // 阻止链接跳转
}
}, true); // 第三个参数为true，表示捕获阶段触发案例一：点击事件响应
点击事件是最常用的交互事件之一。当用户点击某个元素时，我们可以执行相应的操作，如修改元素样式、显示或隐藏内容、跳转页面等。
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>点击事件测试</title>
<style>
#myButton {
padding: 10px 20px;
background-color: #007BFF;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<button id="myButton">点击我</button>
<script>
document.getElementById('myButton').addEventListener('click', function() {
alert('按钮被点击了！');
this.style.backgroundColor = 'red';
});
</script>
</body>
</html>案例二：表单验证事件
表单验证是前端开发中的重要任务。我们可以通过监听表单元素的input事件，实时验证用户输入的合法性。
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单验证测试</title>
<style>
#myInput {
width: 200px;
height: 30px;
padding: 10px;
margin-bottom: 10px;
}
#message {
color: red;
}
</style>
</head>
<body>
<input type="text" id="myInput" placeholder="请输入至少6个字符">
<p id="message"></p>
<script>
document.getElementById('myInput').addEventListener('input', function() {
var input = document.getElementById('myInput');
var message = document.getElementById('message');
if (input.value.length < 6) {
message.textContent = '输入的字符数不足6个';
message.style.color = 'red';
} else {
message.textContent = '输入有效';
message.style.color = 'green';
}
});
</script>
</body>
</html>在某些情况下，可能会无意间多次绑定相同的事件处理函数，导致程序行为异常。为了避免这种情况，可以在绑定事件处理函数前检查该函数是否已经绑定。
示例代码
function checkAndBindEvent(element, eventType, handler) {
// 使用数组存储已绑定的处理函数
var handlers = element._handlers = element._handlers || [];
if (!handlers.some(h => h.type === eventType && h.handler === handler)) {
element.addEventListener(eventType, handler, false);
handlers.push({ type: eventType, handler: handler });
}
}
var button = document.getElementById('myButton');
checkAndBindEvent(button, 'click', function() {
console.log('按钮被点击了！');
});通过这种方式，你可以确保每个事件处理函数只被绑定一次，避免重复绑定带来的问题。
事件冒泡与事件捕获事件冒泡和事件捕获是事件处理中的两个重要概念。
- 事件冒泡：事件从最深的节点开始，逐级往上直到文档根节点。例如，如果事件发生在某个元素内部，事件会依次传递给该元素的父元素，直到传递给
document对象。 - 事件捕获：事件从最外层的节点开始，逐级往下直到最具体的元素。例如，事件从
document对象开始，逐级传递给子元素。
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>事件冒泡与捕获</title>
</head>
<body>
<div id="outer">
<div id="inner">
<button id="button">点击我</button>
</div>
</div>
<script>
document.addEventListener('click', function(event) {
console.log('文档点击事件: ', event.target);
}, false); // 默认的冒泡阶段
document.addEventListener('click', function(event) {
console.log('文档点击事件（捕获阶段）: ', event.target);
}, true); // 捕获阶段
document.getElementById('outer').addEventListener('click', function(event) {
console.log('外层点击事件: ', event.target);
}, false); // 冒泡阶段
document.getElementById('inner').addEventListener('click', function(event) {
console.log('内层点击事件: ', event.target);
}, false); // 冒泡阶段
document.getElementById('button').addEventListener('click', function(event) {
console.log('按钮点击事件: ', event.target);
}, false); // 冒泡阶段
</script>
</body>
</html>本文通过详细的示例讲解了JS事件的基础知识和应用。通过学习这些内容，读者可以更好地理解和使用JS事件，实现更复杂的交互逻辑。希望读者可以结合实际项目应用这些知识，进一步提升自己的前端开发技能。对于进一步的学习，建议读者可以尝试自己编写更多的事件处理代码，提升对事件机制的理解。
點擊查看更多內容
為 TA 點贊
評論
評論
共同學習，寫下你的評論
評論加載中...
作者其他優質文章
正在加載中
感謝您的支持，我會繼續努力的～
掃碼打賞，你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃，即可進行掃碼打賞哦