js：Event.currentTarget与Event.target的区别

时间 2019-11-18

标签 event.currenttarget event currenttarget event.target target 区别栏目 JavaScript 繁體版

原文原文链接

e.target is what triggers the event dispatcher to trigger and e.currentTarget is what you assigned your listener to.javascript

举个例子：css

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
    #container {
        height: 200px;
        width: 100px;
        background-color: #333;
    }

    </style>
</head>
<body>

<div id="container">
    
    <button id="btn">button</button>

</div>

<script type="text/javascript">
function handle(e){
    console.log('e.currentTarget: ' + e.currentTarget.tagName);
    console.log('e.target: ' + e.target.tagName);
    console.log('this:' + this.tagName);
}

var div = document.getElementById('container');
div.addEventListener('click', handle, false);

</script>

</body>
</html>

事件是绑定到div上的，点击div中的按钮时：html

点击div中按钮以外的区域时：java

因为是在div上绑定的点击事件，因此handle中的this和e.currentTarget都指向div，而target指向鼠标点击的那个元素。this

1. Event.target和Event.currentTarget的区别
2. jQuery中event.target和this的区别
3. JQuery中this和event.target的区别
4. Javascript中event.srcElement和event.target的区别
5. event.srcElement 与event.target
6. | 与|| 、&与&&的区别
7. &与&&、|与||的区别
8. += 与 =+ 的区别
9. ==与===的区别
10. 与的区别
更多相关文章...
• Hibernate的级联与反转 - Hibernate教程
• SQL 别名 - SQL 教程
• Docker容器实战(六) - 容器的隔离与限制
• Composer 安装与使用