一、 stopPropagation()
用于停止事件的传播，阻止其向上或向下的传播。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
border: 1px solid red;
}
</style>
</head>
<body>
<div id="outer">
<div id="middle">
<div id="inner"></div>
</div>
</div>
<script>
const outer = document.getElementById('outer');
const middle = document.getElementById('middle');
const inner = document.getElementById('inner');
outer.addEventListener('click', () => {
console.log('Outer clicked');
},);
middle.addEventListener('click', () => {
console.log('Middle clicked');
},);
inner.addEventListener('click', (event) => {
event.stopPropagation();
console.log('Inner clicked');
},);
</script>
</body>
</html>
输出结果只有 Inner clicked .
二、 preventDefault()
用于阻止事件的默认行为。例如，在链接上使用该方法可以防止跳转到新页面。
<a href="https://www.baidu.com" id="link">Click me!</a>
<script>
const link = document.getElementById('link');
link.addEventListener('click', function(event) {
event.preventDefault();
console.log('Link clicked, but default behavior prevented');
});
</script>
三、 stopImmediatePropagation()
与stopPropagation类似，但它能够立即停止事件的传播，并且阻止同一元素上其他事件处理函数的执行。
<button id="btn">Click me!</button>
<script>
const btn = document.getElementById('btn');
btn.addEventListener('click', function(event) {
event.stopImmediatePropagation();
console.log('Button clicked, propagation stopped');
});
btn.addEventListener('click', function(event) {
console.log('Another event handler on the same element');
});
</script>
在点击按钮时，第二个事件处理函数不会执行。输出结果只有 Button clicked, propagation stopped
四、 target 和 currentTarget
- event.target：表示事件的实际目标，即触发事件的元素。
- event.currentTarget：表示当前绑定事件的元素，即事件处理函数所附加的元素。
<div id="outer">
<div id="inner">
<button id="btn">Click me!</button>
</div>
</div>
<script>
const outer = document.getElementById('outer');
const inner = document.getElementById('inner');
const btn = document.getElementById('btn');
outer.addEventListener('click', function(event) {
console.log('Outer target:', event.target.id);
console.log('Outer currentTarget:', event.currentTarget.id);
});
inner.addEventListener('click', function(event) {
console.log('Inner target:', event.target.id);
console.log('Inner currentTarget:', event.currentTarget.id);
});
btn.addEventListener('click', function(event) {
console.log('Button target:', event.target.id);
console.log('Button currentTarget:', event.currentTarget.id);
});
</script>
输出结果
Button target: btn
Button currentTarget: btn
Inner target: btn
Inner currentTarget: inner
Outer target: btn
Outer currentTarget: outer
五、事件委托
事件委托是一种常用的技术，可以在父元素上代理处理多个子元素的事件。这样可以减少事件处理函数的数量，提高性能。
<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
<script>
const list = document.getElementById('list');
list.addEventListener('click', function(event) {
if (event.target.tagName === 'LI') {
console.log('Clicked on item:', event.target.textContent);
}
});
</script>
依次点击，输出结果为
Clicked on item: Item 1
Clicked on item: Item 2
Clicked on item: Item 3
Clicked on item: Item 4
