【JavaScript】クリックイベント等で取得したオブジェクトの中身│株式会社シーポイントラボ

JavaScrip のクリックイベント等で、よく下記のようなコードを書くかと思います。

$("#button").on("click",function(event){
    // クリック時に実行したい処理
});

で、この時に取得できるオブジェクトから取得できる値の中で、使用頻度の高そうなものをまとめてみました。
今までは、イベントをキャンセルする event.preventDefault(); くらいしか使ったことがなかったんですよね。

・DOM要素の取得

var dom = event.target;

クリックしたDOM要素を取得できます。
が、これはこのまま使うよりも、後述する、ID・class名の取得と一緒に使う事の方が多そうですね。

・クリックした座標の取得

// x座標
var x = event.x;
// y座標
var y = event.y;

こちらはクリックした位置を取得できます。
click イベント以外にも、mousemove イベントや touchmove イベントでももちろん使えます。

・ID、class名の取得

// ID名取得
var id = event.target.id;
// class名取得
var class = event.target.className;

先述した、DOM要素の取得で取得できた要素の ID名、class名を取得できます。

・要素の幅と高さ

var width = event.target.offsetWidth;
var height = event.target.offsetHeight;

target で取得できた要素の幅と高さを取得する方法です。
単に width、height と記述しただけでは取得できないので、そこは要注意ですね

・要素のスタイル

var eventType = event.target.style;

要素のスタイルを取得できます。
これは .css() メソッドと一緒に使うことが多そうかな？

・イベントタイプの取得

var eventType = event.type;

イベントの種類を取得する方法です。
これも便利そうですね。

個人的には、要素名を取得するメソッドがあるとよかったのですが、無さそうだったので…今回はclass名の取得で対処しました。
まあ、でもclass名でも問題はなかったです。
…良く思うのですが、一度アルゴリズムでハマって考え込んでしまうと、「このやり方でなければいけない」と思い込んでしまうので、柔軟な発想って重要だなとつくづく思います。

以上、クリックイベント等で取得したオブジェクトから取得できる値の一覧でした。
他にも、要素の親要素・子要素を取得する方法もありましたが、今回は割愛します。
詳しくは、今回参考にさせていただいた下記のサイトをご覧ください。

【JavaScript】クリックイベントで取得したオブジェクトの使い方まとめ｜Web制作会社スタイル
 http://www.hp-stylelink.com/news/2014/04/20140422.php

【JavaScript】クリックイベント等で取得したオブジェクトの中身