javascript - イベントバブリングでクリックのソースを見つける

Question

次のコードがあります。

<div id="buttons">
    <button id="btn1">1</button>
    <button id="btn2">2</button>
</div>

<div>クリックを処理するためにイベントハンドラーをアタッチします。

ボタンをクリックすると、イベントが div によってキャプチャされます。イベントのソースを取得する方法はありますか?

たとえば、イベントが各ボタンにある場合、thisキーワードはボタンを参照します。それが上にあるとき、<div>それはそれを指します。

クリックが div によってキャッチされた場合、クリックのソースを特定する方法はありますか? つまり、実際にクリックされたボタンはどれですか。

皆さんありがとう

デイブ

score 5 · Accepted Answer

originalTargetオブジェクトのプロパティを使用してevent、イベントのソースを見つけることができます。

HTML

<div id="buttons">
    <button id="btn1">1</button>
    <button id="btn2">2</button>
</div>

JavaScript

document.getElementById('buttons').onclick = function (evt) {
    var source = evt.srcElement || evt.originalTarget
    alert(source.id);
}

score 1 · Accepted Answer

jQuery を使用している場合、これが役立ちます。

$("#buttons").click(function(evt){
       alert($(evt.target).attr("id"));
});

2 に答える 2