- 更新日: 2017年02月27日
- 公開日: 2015年12月05日
ゼロから始めるJavaScript講座Vol17 DOM操作〜イベントハンドラ〜
ゼロから始めるJavaScript講座DOM操作イベントハンドラ
イベントハンドラ
「マウスでボタンをクリック」「キーボードのキーを押す」など、Webページに対する動作や操作のことをイベントと呼びます。
JavaScriptではこのようなイベントを監視し、実際にイベントが発生した際に特定の処理を命令することができます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>イベントハンドラ</title>
</head>
<body>
<button id="alert">アラート</button>
<script>
function event_alert(){
alert("ボタンが押されました");
}
var button = document.getElementById("alert");
button.addEventListener("click", event_alert, false);
</script>
</body>
</html>
ボタンをクリックすると、アラートが表示されます。これはJavaScriptで「ボタンをクリック」というイベントを監視しており、クリックというイベントが発生した際に、アラート実行という処理を行っています。
このようにイベントを検知し、それに対し処理を与えるための命令をイベントハンドラと呼びます。
DOMで取得した要素に対してaddEventListenerメソッドを利用すると、その要素に対するイベントを監視し、イベントが実行された時にlistnerで指定した処理を実行できます。
今回はbutton要素[button要素[id=”alert”]clickクリックevent_alert関数
イベントに関する一連の処理をまとめると以下のようになります。
今回はclickイベントでしたが、その他イベントでも基本的に同じ流れとなります。
イベントの種類は多数あります。addEventListenerメソッドで検知できるイベントの一部を紹介します。
addEventListenerメソッドで検知できるイベント
実際にaddEventListenerメソッドの引数に指定するイベント名をclickからmouseoverに変更すると、ボタンの上にマウスカーソルを重ねるだけでアラートが表示されます。
イベント処理はJavaScriptで非常によく利用される仕組みですので、しっかりと理解しておきましょう。
NEXTLESSONDOM操作イベントの実行タイミングDOM操作イベントの実行タイミング
PREVLESSONDOM操作DOM操作
- この記事を書いた人
- CodeCampus編集部
