target 事件属性
JavaScript基础 2022-06-08 12:07:01小码哥的IT人生shichen
target 事件属性
实例
获取触发特定事件的元素：
alert(event.target);
完整实例：
<!DOCTYPE html>
<html>
<body onclick="myFunction(event)">
<p>请单击一个段落。警报框将提示触发事件的元素。</p>
<p><b>注释：</b>target 属性返回触发事件的元素，不一定是事件侦听器的元素。</p>
<script>
function myFunction(event) {
alert(event.target.nodeName);
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
页面下方有更多 TIY 实例。
浏览器支持
表中的数字注明了完全支持该属性的首个浏览器版本。
| 属性 | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| target | 支持 | 9.0 | 支持 | 支持 | 支持 |
语法
event.target技术细节
| 返回值： | 对最初发生事件的对象的引用。 |
|---|---|
| DOM 版本： | DOM Level 2 Events |
更多实例
使用 event.target 属性和 element.tagName 属性来找出哪个元素触发了指定的事件：
var x = event.target.tagName;
完整实例：
<!DOCTYPE html>
<html>
<body onclick="myFunction(event)">
<p>单击此文档中的任何元素，可找出哪个元素触发了 onclick 事件。</p>
<h1>这是一个标题</h1>
<button>这是一个按钮</button>
<p id="demo"></p>
<script>
function myFunction(event) {
var x = event.target;
document.getElementById("demo").innerHTML = "Triggered by a " + x.tagName + " element";
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
