JavaScriptイベントハンドラの種類を知ろう。イベントハンドラまとめ

JavaScriptのイベントハンドラをズラ~と並べてみました。

並べて見ると各々違いが理解しやすいです。

私は勉強になったので、JavaScript勉強中の方、一度自分で一つのHTML上に並べて書いてみると良いかもしれません。

JavaScriptのイベントハンドラ

こちらはonMouseDownのハンドラ。

 

リンク上でマウスダウンするとメッセージが表示。

 

こちらはonMouseMoveのハンドラ。

JavaScriptのイベントハンドラ一覧のソース

ソースはこちらです。

<html lang="ja">
<head>
 <title>event</title>
</head>
<body>
<h1>イベントハンドラ色々</h1>
 <a href="#" onMouseOver="alert('マウスオーバーしました')">マウスオーバーして</a><br>
 //マウスのカーソルが触れたときに実行されるイベント
 <a href="#" onMouseOut="alert('マウスアウトしました')">マウスオーバーしてから離れて</a><br>
 //マウスのカーソルが離れたときに実行されるイベント。
 <a href="#" onMouseUp="alert('マウスアップしました')">マウスを押してから離して</a><br>
 //マウスのボタンを押して離したときに実行されるイベント。
 <a href="#" onMouseDown="alert('マウスダウンしました')">マウスを押して</a><br>
 //マウスのボタンを押したときに実行されるイベント。
 <a href="#" onMouseMove="alert('マウスムーブしました')">マウスを動かして</a><br>
 //さわって マウスのカーソルが動いている間に実行されるイベント。
<a href="#" onClick="alert('押しました');">マウスを押して</a>
 //押して クリックしたときに実行されるイベント。
 <form action="#">
 <select name="select1" onChange="alert(this.value);">
 <option value="AAA">AAA
 <option value="BBB">BBB
 <option value="CCC">CCC
 </select>
 </form>
 //セレクトボックスの内容が変更されたときに実行されるイベント。
 <form action="#" onSubmit="return confirm('送信しますか?');">
 <input type="text" name="text1" value="">
 <input type="submit" value="送信">
 </form>
 //フォームの内容が送信されるときに実行されるイベント。
 <form action="#">
 <input type="text" name="text1" value="" onContextMenu="alert('直接入力してください。'); return false;">
 </form>
 //コンテキストメニュー(やマウスの右クリック)を開くときに実行されるイベント。)
 <form action="#">
 <input type="text" value="こちらを選択してください" size="20" onFocus="this.value = '選択しましたね';">
 </form>
 //目的のオブジェクトがフォーカスされた(アクティブ)ときに実行されるイベント。
 <body onBlur="window.close();">
 //見る onFocus とは反対に目的のオブジェクトが非アクティブになったときに実行されるイベント。
 <body onLoad="alert('読み込みを完了しました');">
 //見る ページが全て読み込まれたときに実行されるイベント。
 <body onUnload="alert('ページを閉じました');">
 //見る ページを閉じたり移動したときに実行されるイベント。
 <span onSelectStart="alert('要素を選択しましたね');">ああああああ</span>
 //あいうえお 要素を選択したときに実行されるイベント。
</body>
</html>

 

 

 

タイトルとURLをコピーしました