web-dev-qa-db-ja.com

Javascriptクリックイベントハンドラ-クリックしたアイテムへの参照を取得するにはどうすればよいですか？

私のHTML：

<div id="x" onclick="clickHandler(event)">
   <div id="button1">This turns green</div>
   <div id="button2">This turns blue</div>
</div>

それではまず、クリックハンドラーに「イベント」を渡すことになっているのに、イベントは何らかのシステムキーワードなのでしょうか。また、クリックハンドラーはコンテナdivで識別されるため、どのボタンがクリックされたかをどのように知ることができますか？

javascripthtmlevent-handlingclick
22
antonpug

eventは、イベントが発生したときに自動的に作成されるイベントオブジェクトです。 eventと呼ぶ必要はありません（単にeと呼ぶ傾向があります）。そのEventオブジェクトには、それが表すイベントを記述する多くのプロパティがあります。この場合、興味のあるものはtargetで、イベントのソースである要素を示します。

function clickHandler(e) {
    var target = e.target;
}

実施例 です。

残念ながら、決してそれほど単純ではありません。仕様ではevent.target、Internet Explorerは異なるものを好むため、event.srcElementので、おそらくevent.target存在！例えば：

function clickHandler(e) {
    var target = (e.target) ? e.target : e.srcElement;
}
44
James Allardice

通常、クリックハンドラーの呼び出しの引数リストでクリックされた要素に名前を付けます。

<div id="x">
   <div id="button1" onclick="handle_click_event( this, 'green' )">This turns green</div>
   <div id="button2" onclick="handle_click_event( this, 'blue' )">This turns blue</div>
</div>

function handle_click_event ( obj, new_color ) {
  obj.style.backgroundColor = new_color;
}

そのアプローチはあなたのために働くことができますか？

8
Pete Wilson