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>
実行結果
「文字をクリックして下さい」をクリックすると、「イベントハンドラに関数を登録するサンプル」というアラートメッセージが表示されます。