この投稿では、「event.target」と JavaScript でのその使用法について説明します。
JavaScript の「event.target」とは何ですか?
「 イベント.ターゲット 」は「のプロパティ/属性です。 イベント 」を JavaScript で記述します。イベントをトリガーした要素を参照します。 event.target 属性にアクセスするには、要素のイベントをリッスンする必要があります。 「 addEventListener() 」メソッドは、特定のイベントをリッスンするために利用されます。
構文
「event.target」プロパティを使用するには、次の構文に従います。
エレメント。 addEventListener ( 「<イベント>」 、 関数 ( イベント ) {
コンソール。 ログ ( イベント。 目標 )
} )
指定された構文では、
- 「 addEventListener() 」メソッドは、特定の要素のイベント ハンドラーを追加するために使用されます。
- 「 <イベント> 」は、「 クリック 」、「 マウスオーバー '、 等々。
例
与えられた例では、「 イベント.ターゲット ' 財産。
ここでは、id を割り当ててボタンを作成します。 ボタン ボタンにアクセスするために JavaScript で使用されます。
< ボタン ID = 「ボタン」 > ここをクリック ボタン >
JavaScript ファイルでは、まず、「 getElementById() ' 方法：
定数 ボタン = 書類。 getElementById ( 'btn' ) ;ボタンにイベント リスナーをアタッチします。 「 クリック 」 ボタンのクリックでイベントが開始され、イベント オブジェクトが引数としてイベント リスナーに渡されます。 「 イベント.ターゲット ” 属性にリスナー関数からアクセスして、イベントをトリガーしたボタン要素への参照を取得できます。
ボタン。 addEventListener ( 'クリック' 、 関数 ( イベント ) {コンソール。 ログ ( 「対象イベント：」 、 イベント。 目標 ) ;
} ) ;
出力は、クリックされた特定のボタンの参照を示しています。
より多くの情報を取得し、その属性を使用して対象のイベントにスタイリングなどのさまざまな機能を適用できます。
「event.target」の属性は何ですか?
ターゲット要素に関する情報を提供する「event.target」プロパティのさまざまな属性があります。 event.target オブジェクトの一般的な属性のいくつかを次に示します。
| event.target 属性 | 説明 |
| event.target.tagname | 「 名前 対象要素のHTMLタグの「」。 |
| イベント.ターゲット.値 | 「 価値 」 ターゲット要素の。この属性は主に入力要素に使用されます。 |
| event.target.id | 「 ID 」 対象要素の属性、指定された属性を使用します。 |
| event.target.classList | 「のリスト」 クラス 」 ターゲット要素を含むこの属性によってアクセスされます。 |
| event.target.textContent | 「 テキストコンテンツ 」 ターゲット要素の。 |
| event.target.href | この属性は「 href リンクなどの対象要素の ” 属性。 |
| event.target.style | 「 CSS 」 対象要素のプロパティ、この属性を使用します。 |
例 1: ターゲット要素の背景色を変更する
提供された例では、「 スタイル 」の属性「 クリック ' イベント：
定数 ボタン = 書類。 getElementById ( 'btn' ) ;ボタン。 addEventListener ( 'クリック' 、 関数 ( イベント ) {
イベント。 目標 . スタイル . 背景色 = '青' ;
} ) ;
出力
例 2: ターゲット要素の値を取得する
タグを使用して、入力テキスト フィールドとテキストを表示する領域を作成します。入力フィールドに ID を割り当て、
タグを「 テイクインプット ' と ' 見せる '、 それぞれ：
< 入力方式 = '文章' ID = 「テイクインプット」 >< ピッド ID = '見せる' > p >
「」を使用してテキスト フィールドの参照を取得します。 getElementById() ' 方法：
入力されました = 書類。 getElementById ( 「テイクインプット」 ) ;使用 ' 価値 」属性に「 イベント.ターゲット 」を使用して、対象の要素の値を取得します。
入力。 addEventListener ( '入力' 、 ( イベント ) => {書類。 getElementById ( '見せる' ) . インナーHTML = イベント。 目標 . 価値 ;
} )
ご覧のとおり、テキスト ボックスに入力された値は、「 価値 ' 属性：
以上、JavaScript の「event.target」についてでした。
結論
「 イベント.ターゲット 」は、イベントをトリガー/開始した要素を指します。ターゲット要素に関する情報を提供する「event.target」プロパティの属性がいくつかあります。例えば、 ' event.target.tagname 」、「 。価値 」、「 .id 」、「 。スタイル '、 等々。この投稿では、「event.target」、その属性、および JavaScript での使用法について説明しました。