No.1のCodeCampが運営するプログラミング未経験の方のための学習メディアですCodeCampとは?(受講生体験記)「エンジニアは女性のキャリアとして魅力的」未経験からの転職体験記リモートワーク×多拠点居住の新しい生き方を実現する。目次ゼロから始めるJavaScript講座DOM操作イベントハンドライベントハンドラゼロから始めるJavaScript講座DOM操作イベントハンドライベントハンドラ「マウスでボタンをクリック」「キーボードのキーを押す」など、Webページに対する動作や操作のことをイベントと呼びます。JavaScriptではこのようなイベントを監視し、実際にイベントが発生した際に特定の処理を命令することができます。</script></body></html>ボタンをクリックすると、アラートが表示されます。これはJavaScriptで「ボタンをクリック」というイベントを監視しており、クリックというイベントが発生した際に、アラート実行という処理を行っています。このようにイベントを検知し、それに対し処理を与えるための命令をイベントハンドラと呼びます。DOMで取得した要素に対してaddEventListenerメソッドを利用すると、その要素に対するイベントを監視し、イベントが実行された時にlistnerで指定した処理を実行できます。今回はbutton要素[button要素[id=”alert”]clickクリックevent_alert関数イベントに関する一連の処理をまとめると以下のようになります。今回はclickイベントでしたが、その他イベントでも基本的に同じ流れとなります。イベントの種類は多数あります。addEventListenerメソッドで検知できるイベントの一部を紹介します。addEventListenerメソッドで検知できるイベント実際にaddEventListenerメソッドの引数に指定するイベント名をclickからmouseoverに変更すると、ボタンの上にマウスカーソルを重ねるだけでアラートが表示されます。イベント処理はJavaScriptで非常によく利用される仕組みですので、しっかりと理解しておきましょう。家事も仕事もプログラミングも。2020年版】社会人でも通いやすいプログラミング教室5選|選び方の基準も解説プログラミング学習プログラミングスクール・サービス「エンジニアは女性のキャリアとして魅力的」モノづくり好き理系女子がWebエンジニアへ転職するまで受講生インタビュープログラミング未経験で介護師からエンジニアへ。家事も仕事もプログラミングも。受講生インタビュープログラミング習得後、フリーランスに転身。受講生インタビューフリーランス塾講師からエンジニアへ26才で転職。先生の支えがあって成長できました。学習ガイドtwitterLINE。