JavaScriptのevent.targetとevent.currentTargetの違い
event.targetとevent.currentTargetの値は一般的に異なります。例えば以下のサンプルコードを実行すると次の表が得られます。ボタン2と3はどちらもA要素の子要素です。
| クリックした場所 | event.target | event.currentTarget |
|---|---|---|
| ボタン1 | ボタン1 | ボタン1 |
| ボタン2 | ボタン2 | A要素 |
| ボタン3 | ボタン3 | A要素 |
| A要素 | A要素 | A要素 |
| クリックした場所 | 実際に押された要素 | onclickイベントを持つ要素 |
通常（event.targetなどを使用しない）であればどちらを使用しても問題は起きませんが、クリックされた要素のカスタム属性を使用するためにgetAttribute関数を使う場合などはバグの原因となるので注意が必要です。
サンプルコード
（※Vue.jsで詰まったのでVue.jsを使っていますが、onclickに記述しても同様です）
<html lang="ja"> <head> <meta charset="utf-8"> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <title></title> </head> <body style="padding:.5rem"> <div id="app1"> <button @click="click">ボタン1</button> <a @click="click" style="border:1px solid black; padding:.5rem;"> <button>ボタン2</button> <button>ボタン3</button> </a> </div> <script> var app1 = new Vue({ el: "#app1", methods: { click: function(event) { let s = ""; s += "target:"+event.target.constructor.name+" "+event.target.innerText; s += ", "; s += "currentTarget:"+event.currentTarget.constructor.name+" "+event.currentTarget.innerText; console.log(s); } } }); </script> </body> </html>
