blog

日常・技術のことを記録する

イベントハンドラってなんや

プログラミング(JavaScript)

htmlとjsはじめて、<script>タグの中だけがjsだと思ってた。
けど、そうじゃないらしい。
onclickはもうすでにjsなんだって。
めっちゃ不思議！！htmlじゃん！って思ったのさ。

<html>
<head>
</head>
<body>
<button onclick=“clicktest();function clicktest(){alert(‘test’);}“>
</body>
</html>

これで動くの。
<script>の記述ないじゃん！不思議ね。

で、そもそもonclickってなんだろうと思って。
本で調べてみたら、「イベントハンドラ」というカテゴリらしい。

イベントハンドラとは

イベントを処理する関数のこと。
ブラウザにあらかじめ登録しておくと、ある特定のイベント(※)が発生したときにブラウザから呼び出されるJavaScript関数のこと。
※マウスクリック、キー押下、スマホではある種のジェスチャ、等さまざまなアクション

ふーん。
「マウスクリックする(イベント発生)とほげほげ処理が走るよ」みたいな設定してくれる便利な関数ってことなのね。

イベントハンドラの使い方

1.イベントタイプとイベントターゲットを指定して、イベントハンドラ関数(例:onclick)をブラウザに対して登録する。
2.指定したタイプのイベントが指定したターゲット上で発生したとき、ブラウザがこのハンドラを呼び出す。

「イベントタイプ」と「イベントターゲット」ってなんじゃらホイという感じなんだけど、たとえば、js側でgetElementbyIdでidを取得する処理にしてたなら、こんな感じかな？

<form id="target"> 
<!-- ↑ここのidの値がイベントターゲットにあたる --!>
    <input type="checkbox" value="もつ鍋"> もつ鍋
    <input type="checkbox" value="餃子"> 餃子
<!-- ↑ここのtypeの値がイベントタイプにあたる--!>
</form>

イベントハンドラの種類

・onclick…クリックされたときに発生するイベントハンドラ。
・onkeydown…キーが押下されたときに設定するイベントハンドラ。
・onload…ページがロード(読み込み)したときに発生するイベントハンドラ。
などなどキリなくいっぱいあるっぽい。
中にはウィンドウがリサイズされたときに発生するイベントハンドラ(onresize)もあって、どんなとき使うんだろってかんじ。

へえ～。これからたくさん使いそうね。めも...φ(･_･