【JavaScript】onclick属性などで要素IDを取得する確実な方法

JavaScriptで要素クリック時の処理を登録するには、

addEventListener を使う
on とか bindを使う（jQuery）
onclick で直接関数呼び出す

主にこの3つの方法があります。

今回は３つめの onclick などから関数呼び出しした場合の話

ここで呼び出し元の要素IDを取得したかったんですよね。

ようやく取得方法が分かったので、
ここでは onclick 内の関数で要素IDを取得する方法をまとめます。

このページの目次

onclick などに渡した関数内で要素IDが欲しい場面
要素の onclick に渡した関数内で要素ID取得するコード例
- ちなみに window.event について少し解説
ここまでのまとめ

onclick などに渡した関数内で要素IDが欲しい場面

たとえばこういう感じのHTMLを書いたとしましょう。

▼ ボタンが３つあるHTML例

<button id="b1" onclick="clk()"></button>
<button id="b2" onclick="clk()"></button>
<button id="b3" onclick="clk()"></button>

そして onclick に渡した関数で要素IDごとに処理とかしたかったんです。

▼ ボタン要素IDごとに処理分けするコード（仮）

function clk(){
  var buttonId = '【要素ID】';
  switch(buttonId){
    case 'b1': 
      break;
    case 'b2': 
      break;
    case 'b3':
      break;
  }
}

function clk(){

var buttonId = '【要素ID】';

switch(buttonId){

case 'b1':

break;

case 'b2':

break;

case 'b3':

break;

}

「引数にID渡せばいいじゃん？」というツッコミもあるかもしれません。

でも onclick を書き変えたくないという怠惰な理由でやりたくないです。
（あとからIDを変えると書き直しになるのもよくない）

でも実は、引数にIDを渡さずとも要素IDを取得する方法はありました。

要素の onclick に渡した関数内で要素ID取得するコード例

そのやり方は意外と複雑というか一筋縄でいきません。

でもやり方さえ分かれば難しくないですね。

コード例を出すなら次のような感じです。

まず先ほどと同じく、 onclick 指定したボタン要素作成

▼ さっきと同じボタン要素３つのHTML例

<button id="b1" onclick="clk()"></button>
<button id="b2" onclick="clk()"></button>
<button id="b3" onclick="clk()"></button>

まあさっきと同じです。

HTML側で変更は必要ないので。

要素ID取得するには onclick で呼ばれる関数で一工夫します。

例えば今回の clk() の場合はこう書けます。

▼ 先ほどの clk() を少しだけ改造

function clk(e){
  /// 要素IDを取得する
  var e = e || window.event;
  var elem = e.target || e.srcElement;
  var elemId = elem.id;
  
  /// 要素IDに応じて処理を変える...
  switch(elemId){
    case 'b1': 
      break;
    /// 以下略...
  }
}

function clk(e){

/// 要素IDを取得する

var e = e || window.event;

var elem = e.target || e.srcElement;

var elemId = elem.id;

/// 要素IDに応じて処理を変える...

switch(elemId){

case 'b1':

break;

/// 以下略...

}

大事なポイントは次の３つ

イベント引数を渡す
たとえば addEventListener や bind に渡すのも考慮し、イベント引数（ e ）を渡す
呼び出し元要素を取得
上コードの e.target || e.srcElement の部分。
呼び出し元要素IDを取得
上コードの elem.id の部分。ココはそのままID取得するだけ

こうすれば関数に要素IDとか渡さなくていいからスマートですね。

ちなみに window.event について少し解説

蛇足だけど window.event について・・・

MDNリファレンスでは、このような説明が書かれてました。

Window の読み取り専用プロパティである event は、現在サイトのコードが処理している Event を返します。イベントハンドラーのコンテキスト外では、値が常に undefined になります。

新しいコードではこのプロパティの使用を避けるべきであり、代わりにイベントハンドラー関数になる Event を使用してください。このプロパティは広くサポートされておらず、またサポートされていてもコードが壊れやすくなるおそれがあります。

引用元　：　https://developer.mozilla.org/ja/docs/Web/API/Window/event

イベントハンドラーの内部で使う専用のプロパティみたいです。

でも「使用を避けるべき」とか「壊れやすくなる」とか書いてある、、、

あと「広くサポートされていない」とも書いてあります。

ちなみにブラウザー実装状況、それは次から確認可能です。