currentTargetとは
- ここで説明する currentTarget とは次の語句からなるjQueryのEventObjectプロパティです。
- current
- 読み: カレント
意味: 現在の - target
- 読み: ターゲット
意味: 的、標的、目的となるもの
currentTargetプロパティの概要
この EventObject プロパティは、イベント発生時にイベントが発生している要素をオブジェクトとして取得します。
currentTarget はオブジェクト型ですので、currentTarget の後に (.) ドット演算子で繋いで id などのプロパティを取得することが可能です。
currentTarget 経由のプロパティから得られる情報は、ハンドラー内の $(this).prop("プロパティ名"); と違いがないと思われます。 また、このプロパティの値はオブジェクト型なので (.) ドット演算子で繋いでメソッドを利用することも可能です。
構文
サンプルを見る前に構文を確認しておきます。
構文は 02 行目の部分です。 02 行目の eo は 01行目の function(eo) の イベントオブジェクトを参照しています。
$(Selector).EventMethod(function(eo){
var objCurrentEventTarget = eo.currentTarget;
});サンプルコードと実行結果
ここでは、button 要素と div 要素の click イベントに関数をアタッチしておき、 要素をクリックした時に生成されるイベントオブジェクトの currentTarget プロパティを経由して id の値を取得しています。
サンプルでは、button 要素と div 要素をクリックすることでイベントが発生します。
div 要素をクリックした場合には、div 要素のクリックイベントが発生します。 しかし、button 要素をクリックした場合には、button 要素と div 要素の両方のクリックイベントが発生します。 これはイベントのバブリングという現象です。 バブリングについて分からない方は、「 バブリングとは 」のページを参考にしてください。
サンプルコード: CSS
<style>
#idDiv{
background-color: ##lightblue;
border: thin solid ##gray;
padding: 3em;
}
</style>
サンプルコード: HTML
<head>
<style>...</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div id="idDiv">
<button id="idButton">BUTTON</button>
</div>
<script>...</script>
</body>
- 06-08: div (ブロックコンテナー要素です。この要素のクリックイベントからイベントオブジェクトのプロパティの値を取得してアラートダイアログに表示します。)
- 07: button (ボタンです。この要素のクリックイベントからイベントオブジェクトのプロパティの値を取得してボタンのテキストに表示します。)
サンプルコード: script
<script>
$("#idDiv").click(function(eo){
window.alert(eo.currentTarget.id);
});
$("#idButton").click(function(eo){
window.alert(eo.currentTarget.id);
});
</script>
- 03, 06: eo.currentTarget.id (イベントオブジェクトの currentTarget プロパティ経由で id を取得しています。 この 03 行目の eo は 02 行目の function(eo) を参照しています。 また、06 行目の eo は 05 行目の function(eo) を参照しています。)