JavaScript target 关键字
最后修改于 2025 年 4 月 16 日
在本文中，我们将展示如何在 JavaScript 事件中使用 target 属性来识别触发事件的元素。
target 属性
target 属性是对派发事件的对象的引用。它在传递给事件处理程序的 event 对象上可用。此属性是只读的，并提供对触发事件的元素的访问。
与引用处理程序绑定到的元素的 this 不同，target 始终引用发生事件的元素。这在事件委托场景中特别有用，因为事件会冒泡。
target 属性是 DOM Event 接口的一部分，并受所有现代浏览器支持。它适用于所有类型的 DOM 事件，包括点击、鼠标、键盘和表单事件。
基本点击事件目标
以下示例演示了在点击事件处理程序中 target 属性的基本用法。
<button id="myButton">Click me</button>
<script>
document.getElementById('myButton').addEventListener('click', function(event) {
console.log('Target element:', event.target);
console.log('Button text:', event.target.textContent);
});
</script>
当点击按钮时，事件处理程序会记录目标元素及其文本内容。event.target 引用了被点击的实际按钮元素。这展示了如何访问触发事件的元素的属性。
Target element: <button id="myButton">Click me</button> Button text: Click me
Target vs currentTarget
此示例演示了 target 和 currentTarget 属性的区别。
<div id="container">
<button id="innerButton">Click me</button>
</div>
<script>
document.getElementById('container').addEventListener('click', function(event) {
console.log('Target:', event.target.id);
console.log('CurrentTarget:', event.currentTarget.id);
});
</script>
当点击按钮时，target 是按钮，而 currentTarget 是 div。目标是触发事件的元素，而 currentTarget 是处理程序附加到的元素。这展示了事件冒泡的实际应用。
Target: innerButton CurrentTarget: container
使用 target 的事件委托
target 属性对于高效的事件委托至关重要。
<ul id="itemList">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<script>
document.getElementById('itemList').addEventListener('click', function(event) {
if (event.target.tagName === 'LI') {
console.log('Clicked item:', event.target.textContent);
}
});
</script>
我们没有将处理程序附加到每个 li，而是使用一个 ul 上的处理程序。target 属性识别了被点击的 li。这种模式更有效，并且适用于动态添加的元素。
Clicked item: Item 2
获取目标属性
target 属性可用于访问元素属性。
<button data-id="123" data-action="delete">Delete Item</button>
<script>
document.querySelector('button').addEventListener('click', function(event) {
const button = event.target;
console.log('ID:', button.dataset.id);
console.log('Action:', button.dataset.action);
});
</script>
此示例展示了如何从目标元素访问数据属性。dataset 属性提供对所有 data-* 属性的访问。这对于存储元素上的元数据以进行事件处理很有用。
ID: 123 Action: delete
表单输入目标
target 属性常用于表单元素。
<form id="myForm">
<input type="text" name="username" placeholder="Username">
<button type="submit">Submit</button>
</form>
<script>
document.getElementById('myForm').addEventListener('submit', function(event) {
event.preventDefault();
const username = event.target.elements.username.value;
console.log('Username:', username);
});
</script>
在这里，我们通过 target 属性访问表单输入值。elements 集合提供了对所有表单控件的访问。这展示了如何阻止默认的表单提交并手动处理数据。
Username: JohnDoe
更改目标样式
target 属性可用于修改触发元素。
<style>
.highlight { background-color: yellow; }
</style>
<div class="boxes">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
</div>
<script>
document.querySelector('.boxes').addEventListener('click', function(event) {
if (event.target.classList.contains('box')) {
event.target.classList.toggle('highlight');
}
});
</script>
点击任何盒子都会切换其高亮类。target 属性允许我们修改被点击的特定元素。这演示了对事件源元素的直接操作。
实际用例：动态内容
这是一个使用 target 与动态添加内容的实际示例。
<div id="taskList">
<button id="addTask">Add Task</button>
</div>
<script>
const taskList = document.getElementById('taskList');
const addButton = document.getElementById('addTask');
let taskCount = 0;
addButton.addEventListener('click', function() {
taskCount++;
const task = document.createElement('div');
task.className = 'task';
task.textContent = `Task ${taskCount}`;
taskList.appendChild(task);
});
taskList.addEventListener('click', function(event) {
if (event.target.className === 'task') {
console.log('Completed:', event.target.textContent);
event.target.style.textDecoration = 'line-through';
}
});
</script>
此代码动态添加任务并通过事件委托处理对它们的点击。target 属性识别了被点击的任务，即使它们在附加处理程序时不存在。这种模式适用于任何动态添加的元素。
Completed: Task 3
来源
在本文中，我们演示了如何使用 target 属性来有效地处理 JavaScript 中的事件。