JavaScript イベントハンドラに関数を登録するサンプル

環境
Google Chrome 106.0.5249.91
Windows 10 Home 64bit

構文
function 関数名() {処理コード}
const 変数名 = document.getElementById(セレクター名)
セレクター名.onclick = 関数名
指定関数名をイベントハンドラに登録しています。

イベントとイベントハンドラの一覧

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
イベント    イベントハンドラ   発生するタイミング
click     onclick ク       リックしたとき
dblclick ondblclick    ダブルクリックしたとき
mouseup     onmouseup     マウスボタンを離したとき
mousedown onmousedown     マウスボタンを押したとき
mousemove onmousemove     マウスポインタが移動したとき
mouseover onmouseover     マウスポインタが重なったとき
mouseout onmouseout     マウスポインタが外れたとき
contextmenu oncontextmenu コンテキストメニューが表示されるとき
イベント    イベントハンドラ   発生するタイミング click     onclick ク       リックしたとき dblclick ondblclick    ダブルクリックしたとき mouseup     onmouseup     マウスボタンを離したとき mousedown onmousedown     マウスボタンを押したとき mousemove onmousemove     マウスポインタが移動したとき mouseover onmouseover     マウスポインタが重なったとき mouseout onmouseout     マウスポインタが外れたとき contextmenu oncontextmenu コンテキストメニューが表示されるとき
イベント	   イベントハンドラ	  発生するタイミング
click	    onclick	ク       リックしたとき
dblclick	ondblclick	   ダブルクリックしたとき
mouseup	    onmouseup	    マウスボタンを離したとき
mousedown	onmousedown	    マウスボタンを押したとき
mousemove	onmousemove	    マウスポインタが移動したとき
mouseover	onmouseover	    マウスポインタが重なったとき
mouseout	onmouseout	    マウスポインタが外れたとき
contextmenu	oncontextmenu	コンテキストメニューが表示されるとき

使用例

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<!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>
<!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>
<!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>

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

JavaScript

Posted by arkgame