Webデザインラボ当サイトはJavaScriptが有効に設定されていないと正しく表示されません。【iPhone・iPad】投稿の準備中にエラーが起きました。後でやり直してください。2018/04/16こんにちは(・∀・)今日はJavaScriptのイベント処理について解説していきたいと思います。イベント処理イベントとはページが読み込まれたりボタンをクリックしたりカーソルが要素の上に乗った、といった時などに発生します。それらイベントが発生した時にJavaScriptで定義した関数を実行するのがイベント処理でイベントハンドラです。イベントハンドラはHTMLのイベント属性で登録したり関数で登録することができます。イベントハンドライベントハンドラには次のような種類があります。hoge1(){alert('test1');}</script>記述の仕方です。buttonをクリックすると関数hoge1()が実行されます。hoge2(){alert('test2');}</script>記述の仕方です。buttonをクリックすると関数hoge2()が実行されます。Resultbutton2処理も直接タグに記述してしまう次のような書き方もあります。onclick="alert('test3');">button3</button>どちらもHTMLのイベント属性で登録するタイプで、同じ結果が返ります。Resultbutton3これらがHTML属性で登録するタイプのイベントハンドラです。HTMLとJavaScriptは切り離したいというのが今の時代の流れです。hoge4(){alert('test4');}</script>buttonタグからonclickイベントはなくなります。Resultbutton4次のようにも書いても同じ結果が返ります。JavaScriptをhead内に書く必要がある場合はこうなります。hoge6b(){alert('test6b');}</script>Resultbutton6最後に記述された関数が上書きされて表示されます。複数のイベントを登録したい場合、addEventListenerを使用すれば上書きされずに全て実行されます。false);</script>Resultbutton7次のような書き方でも同じ結果が返ります。document.getElementById('button8');e.addEventListener('click',hoge8a,false);e.addEventListener('click',hoge8b,false);</script>Resultbutton8イベントリスナ関数を使用する上で注意点があります。イベントを登録する場合、例えばclickアクションのイベントを登録する場合、イベント属性ではonclickと指定しますが、イベントリスナの場合はclickとなります。他にもonsubmitはsubmit、onloadはloadとonを省略して記述します。id="button10">button10</button><script>$('#button10').on('click',function(){alert('test10');});</script>こんな感じの書き方でしたね。Resultbutton9button10addEventListenerは複数のイベントがある時だけしか使わないというわけではありません。IEを気にする必要があった頃はattachEventと併用して使用していたaddEventListenerですが、IEを気にする必要がなくなった今、attachEventと併用するという手間も減ったので、イベントハンドラをaddEventListenerに置き換えていっても良いのかなと思います。Webデザインラボ中の人NYのデザイン学校でグラフィックデザインを学んだ後、同じくNYにあるWeb制作会社にてインターンからWebデザイナーへ。同時期に米国永住権(グリーンカード)を取得。その後某旅行会社系のWebクリエーター兼社内インフラ担として働いた後、結婚を機に約12年に渡るアメリカ生活を終え日本に帰国。日本では某携帯キャリアの社内Webクリエーターとして勤務。Web系に携わる前はホノルル空港でGreeterとして働いていた経験や、アメリカ国内の衣料品を中心としたアパレル系のバイヤー経験もあり。趣味はお酒を飲みながらの家でまったり音楽鑑賞とアウトドア系全般。最近は自転車にもハマってます。更新情報はTwitterかFacebookで配信してるのでフォローして確認してみて。