JSのaddEventListenerの使い方

求人
JSのaddEventListenerの使い方

Angularで自作jsをangular.jsonに読み込んでそれをディレクティブで使っていた時のディレクティブのテストコードを書いていて詰まってしまったので、addEventListenerの使い方をおさらいします。

書き方は以下のように書きます。

第一引数のイベントタイプは’click’だったり、’dblclick’だったり’mouseup’だったりします。

第二引数の関数はイベントが発生したときに実行したい関数を実装します。

第三引数のオプションはデフォルトがfalseです。キャプチャリングフェーズもしくはバブリングフェーズのどちらで実行するかをtrue/falseで指定します。キャプチャリングフェーズで実行したい場合はtrueにする必要があります。

EventTargetは例えば以下などです。

addEventListenerを使えば、指定したDOMのイベントを監視することができます。

HTML内に<div id='id' onclick="alert('あいうえお');>と書いたりしますが、これとほぼ一緒です。

以下、簡単な実装例です。

これを実行すると以下のようにボタンをクリックすると、input要素に値が入ります。

JSのaddEventListenerの使い方

onclickよりaddEventListenerを使うのか

結局のところ、’click’だったらonclickでコードしている関数を実行しているのとほぼ変わりありません。addEventListenerのメリットは一つのイベント(例えば’click’)に複数イベントリスナーを登録することができます。

IE9より前のInternet ExplorerではattachEvent()メソッドを使用しますが、このメソッドは忘れましょう。

第三引数のtrue/falseについて

正直知らなくて良いとおもいます。そんなにイベントリスナー多用することが考えられないです。でも知りたければ参考サイトを見てください。

参考サイト

株式会社CONFRAGE

関西で140-170/80~120万から受け付けております^^
得意技はJS(ES6),Java,AWSの大体のリソースです
Python3.6,Djangoを勉強中です,Javaは少し飽きてしまってます–;
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくは、我に七難八苦を与えたまえ」です^^

スポンサーリンク
  • このエントリーをはてなブックマークに追加
スポンサーリンク

コメントをどうぞ

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

CAPTCHA