2014/04/22

【JavaScript】クリックイベントで取得したオブジェクトの使い方 まとめ

【JavaScript】クリックイベントで取得したオブジェクトの使い方 まとめ

クリックイベントでは,関数の引数にオブジェクトを取得することが出来,その属性値を上書きすることで,演出を加える事が出来ます.今回はオブジェクトから属性値を取得するための記述方法をまとめました.

※Google Chromeでの取得方法になります.その他の環境では記述や取得値が異なる場合がありますので,適宜読み替え・書き換えてください.

目次

サンプルコード

要素のクリック時にイベントを設定するには以下のように記述します.
引数によりオブジェクトを取得でき,以下の例では引数をeventとしています.

var clickElement = document.getElementById("clickTarget");
clickElement.addEventListener("click", function(event) {
//クリック時のイベントを記述
},false);

イベントタイプの取得

var eventType = event.type;

クリック位置の取得

/*x座標の取得*/
var eventX = event.x;

/*y座標の取得*/
var eventY = event.y;

DOM要素の取得

var eventDOM = event.target;

子要素/親要素の取得

/*子要素の取得*/
var eventChild = event.target.childNodes;

/*親要素の取得*/
var eventParent = event.target.parentNodes;

ID名の取得

var eventID = event.target.id;

クラス名の取得

var eventClass = event.target.className;

HTML要素の取得

var eventHTML = event.target.innerHTML;

最初/最後の子要素の取得

/*最初の子要素の取得*/
var eventFirstChild = event.target.firstChild;

/*最後の子要素の取得*/
var eventLastChild = event.target.lastChild;

次の要素の取得

var eventNext = event.target.nextElementSibling;

要素の高さ/幅の取得

/*要素の高さ取得*/
var eventHeight = event.target.offsetHeight;

/*要素の幅取得*/
var eventWidth = event.target.offsetWidth;

要素のスタイルの取得

var eventStyle = event.target.style;

まとめ

主に使用するオブジェクトの属性値の記述はこのようになります.
取得したい値が上記のもので適さない場合や不足する場合には,オブジェクトをconsole.log()を使用してコンソール画面に出力して探してみてください.