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

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

  • addEventListener を使う
  • on とか bindを使う(jQuery)
  • onclick で直接関数呼び出す

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

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

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

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

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

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

▼ ボタンが3つあるHTML例

 

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

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

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

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

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

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

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

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

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

 

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

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

まあさっきと同じです。

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

 

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

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

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

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

  • イベント引数を渡す
    たとえば 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

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

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

 

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

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

あの IE ですらサポートしてるので、多分大丈夫ですね。

恐らくこの記事で紹介したテクニックは問題なく使えると思います。

ここまでのまとめ

以上、onclick 内の関数で要素ID取得する方法でした。

もし問題点などがある場合、コメント欄からご指摘ください。

ではまた ($・・)/~~~

Commentsこの記事についたコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください