JavaScript イベントハンドラに関数を登録するサンプル
環境
Google Chrome 106.0.5249.91
Windows 10 Home 64bit
構文
function 関数名() {処理コード}
const 変数名 = document.getElementById(セレクター名)
セレクター名.onclick = 関数名
指定関数名をイベントハンドラに登録しています。
イベントとイベントハンドラの一覧
イベント イベントハンドラ 発生するタイミング click onclick ク リックしたとき dblclick ondblclick ダブルクリックしたとき mouseup onmouseup マウスボタンを離したとき mousedown onmousedown マウスボタンを押したとき mousemove onmousemove マウスポインタが移動したとき mouseover onmouseover マウスポインタが重なったとき mouseout onmouseout マウスポインタが外れたとき contextmenu oncontextmenu コンテキストメニューが表示されるとき
使用例
<!DOCTYPE html>
<html>
<body>
<div id="cft">文字をクリックして下さい</div>
<script>
function funA() {
alert("イベントハンドラに関数を登録するサンプル");
}
//getElementByIdメソッドでcft要素を取得
const ps = document.getElementById("cft");
// 関数のfunAをイベントハンドラに登録
ps.onclick = funA;
</script>
</body>
</html>
実行結果
「文字をクリックして下さい」をクリックすると、「イベントハンドラに関数を登録するサンプル」というアラートメッセージが表示されます。