Webデザインラボ当サイトはJavaScriptが有効に設定されていないと正しく表示されません。【iPhone・iPad】投稿の準備中にエラーが起きました。後でやり直してください。その2と前々回の投稿【JavaScript】addEventListenerの基本的な書き方でaddEventListenerの基本的な記述方法についてご紹介しました。今日もその続きになります。イベントリスナー作動条件イベントリスナーの使用パターンです。DOM構築後に処理を開始DOM(htmlタグ)が読み込まれたら動作を開始します。false);「DOMContentLoaded」はイベントターゲット「document」にセットします。サンプルではページが読み込まれたら「listen」の文字が表示されます。画像や他のスクリプト等、ページ全体が完全に読み込まれたら動作を開始。false);「load」はイベントターゲット「window」にセットします。サンプルではページ全体が読み込まれたら「overlook」の文字が表示されます。false);Resultちなみにイベントターゲットは「element」、「document」、「window」の3つが基本となります。他にもイベントターゲットになるオブジェクトはありますが、ここでは省略します。要素がクリックされたら動作を開始します。false);「click」はイベントターゲット「document」にセットします。サンプルのボタンをクリックするとボタンの文字が「voice」から「love」に変わります。画面をスクロールしたら処理を開始します。false);「scroll」はイベントターゲット「window」にセットします。画面をスクロールすると「effort」の文字がたくさん?表示されます。ofイベントリスナーを使用する上での注意点イベントリスナーを使用するときの注意点です。関数に引数を付けない関数に引数を付けると動作しない場合があります。ちなみに、各サンプルのコードとサンプルデモのコードでは書き方が違うのわかりました!?️サンプルデモは無名関数でイベント登録してます。Webデザインラボ中の人NYのデザイン学校でグラフィックデザインを学んだ後、同じくNYにあるWeb制作会社にてインターンからWebデザイナーへ。同時期に米国永住権(グリーンカード)を取得。その後某旅行会社系のWebクリエーター兼社内インフラ担として働いた後、結婚を機に約12年に渡るアメリカ生活を終え日本に帰国。日本では某携帯キャリアの社内Webクリエーターとして勤務。Web系に携わる前はホノルル空港でGreeterとして働いていた経験や、アメリカ国内の衣料品を中心としたアパレル系のバイヤー経験もあり。趣味はお酒を飲みながらの家でまったり音楽鑑賞とアウトドア系全般。最近は自転車にもハマってます。更新情報はTwitterかFacebookで配信してるのでフォローして確認してみて。