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