事件处置惩罚步伐
事件处置惩罚步伐一、事件处置惩罚步伐的定义
事件处置惩罚步伐是一段代码，用于响应特定的事件。在网页开发中，事件是在文档或浏览器窗口中发生的特定交互瞬间，如用户点击按钮、页面加载完成等。事件处置惩罚步伐则是针对这些事件执行的函数，它能让网页实现交互性和动态性。
二、事件处置惩罚步伐的绑定方式
2.1 HTML 内联事件处置惩罚步伐
原理：
直接在 HTML 标签中利用事件属性来绑定事件处置惩罚步伐，事件属性的值是 JavaScript 代码。
示例：
<!DOCTYPE html>
<html lang="en">
<body>
<button onclick="alert('你点击了按钮！')">点击我</button>
</body>
</html>
优缺点：
[*]优点是简朴直接，适合简朴的交互。
[*]缺点是 HTML 和 JavaScript 代码耦合度高，不利于代码的维护和复用。
2.2 DOM0 级事件处置惩罚步伐
原理：
通过 JavaScript 获取 DOM 元素，然后将一个函数赋值给元素的事件属性。
示例：
<!DOCTYPE html>
<html lang="en">
<body>
<button id="myButton">点击我</button>
<script>
const button = document.getElementById('myButton');
button.onclick= function() {
alert('你点击了按钮！');
};
</script>
</body>
</html>
优缺点：
[*]优点是兼容性好，所有浏览器都支持。
[*]缺点是一个元素的一个事件只能绑定一个处置惩罚步伐，假如多次绑定，后面的会覆盖前面的。
2.3 DOM2 级事件处置惩罚步伐
原理：
利用 addEventListener() 方法来绑定事件处置惩罚步伐，它可以为元素的同一个事件绑定多个处置惩罚步伐。
示例：
<!DOCTYPE html>
<html lang="en">
<body>
<button id="myButton">点击我</button>
<script>
const button = document.getElementById('myButton');
button.addEventListener('click',function() {
alert('第一次点击响应');
});
button.addEventListener('click',function() {
alert('第二次点击响应');
});
</script>
</body>
</html>
上述代码，当用户点击按钮时，会依次弹出两个告诫框，先显示“第一次点击响应！”，再显示“第二次点击响应！”。假如用户的意图是只让其中一个处置惩罚步伐响应，那么这段代码会导致两个处置惩罚步伐都被触发。
下面对事件处置惩罚逻辑进行调整
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>title</title>
</head>
<body>
<!-- 创建一个按钮 -->
<button id="myButton">点击我</button>
<script>
// 获取按钮元素
const button = document.getElementById('myButton');
// 初始化点击次数为 0
let clickCount = 0;
// 为按钮添加点击事件监听器
button.addEventListener('click',function () {
// 点击次数加 1
clickCount++;
if (clickCount === 1) {
// 第一次点击时显示相应信息
alert('第一次点击响应');
} else if (clickCount === 2) {
// 第二次点击时显示相应信息
alert('第二次点击响应');
}
});
</script>
</body>
</html>
优缺点：
[*]优点是可以为同一个事件绑定多个处置惩罚步伐，并且可以控制事件的捕捉和冒泡阶段。
[*]缺点是部门旧浏览器（如 IE8 及以下）不支持，需要利用
attachEvent() 方法作为替换。
三、事件对象
定义：
当事件触发时，会主动创建一个事件对象，它包罗了与该事件相关的信息，如事件范例、触发事件的元素、鼠标位置等。
示例：
<!DOCTYPE html>
<html lang="en">
<body>
<button id="myButton">点击我</button>
<script>
const button = document.getElementById('myButton');
button.addEventListener('click', function (event) {
console.log(' 事件类型：', event.type);// 事件类型： click
console.log(' 触发事件的元素：', event.target); // 触发事件的元素：<button id="myButton">点击我</button>
});
</script>
</body>
</html>
常见事件属性和方法：
[*]type：返回事件的范例，如 click、mouseover 等。
[*]target：返回触发事件的元素。
[*]preventDefault()：阻止事件的默认举动，如阻止链接的跳转、表单的提交等。
[*]stopPropagation()：阻止事件的冒泡或捕捉。
四、事件流
定义：
事件流：形貌了事件在页面中触发的顺序，主要有事件捕捉和事件冒泡两种机制。
事件捕捉：事件从文档的根节点开始，依次向下查找触发事件的元素，直到找到目标元素。在这个过程中，假如元素绑定了相应的捕捉阶段的事件处置惩罚步伐，会依次执行。
事件冒泡：事件从目标元素开始，依次向上流传到文档的根节点。假如元素绑定了相应的冒泡阶段的事件处置惩罚步伐，会依次执行。
示例：
<!DOCTYPE html>
<html lang="en">
<body>
<div id="outer">
<div id="inner">点击我</div>
</div>
<script>
const outer = document.getElementById('outer');
const inner = document.getElementById('inner');
outer.addEventListener('click',function() {
console.log(' 外层 div 冒泡阶段触发');
}, false);
outer.addEventListener('click',function() {
console.log(' 外层 div 捕获阶段触发');
}, true);
inner.addEventListener('click',function() {
console.log(' 内层 div 冒泡阶段触发');
}, false);
inner.addEventListener('click',function() {
console.log(' 内层 div 捕获阶段触发');
}, true);
</script>
</body>
</html>
这段代码的主要功能是展示事件在DOM中的捕捉和冒泡机制。当你点击inner div时，起首会触发outer div的捕捉阶段事件处置惩罚步伐，然后是inner div的捕捉阶段事件处置惩罚步伐。接着，事件开始冒泡，起首触发inner div的冒泡阶段事件处置惩罚步伐，最后是outer div的冒泡阶段事件处置惩罚步伐。通过这种方式，可以控制事件处置惩罚步伐的执行顺序。
五、事件委托
原理：
利用事件冒泡的原理，将事件处置惩罚步伐绑定到父元素上，当子元素触发事件时，事件会冒泡到父元素上，从而触发父元素上的事件处置惩罚步伐。通过判断事件的 target 属性，可以确定是哪个子元素触发了事件。
示例：
<!DOCTYPE html>
<html lang="en">
<body>
<ul id="myList">
<li>列表项 1</li>
<li>列表项 2</li>
<li>列表项 3</li>
</ul>
<script>
const list = document.getElementById('myList');
list.addEventListener('click',function(event) {
if (event.target.tagName=== 'LI') {
console.log(' 你点击了列表项：', event.target.textContent);
}
});
</script>
</body>
</html>
优缺点：
[*]优点：是可以减少事件处置惩罚步伐的绑定命量，进步性能；便于动态添加和删除子元素，无需为新添加的子元素重新绑定事件处置惩罚步伐。
[*]缺点：是需要对事件的 target 属性进行判断，增长了代码的复杂度。
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]