【JavaScript】イベントハンドラを使った呼び出し方法

JavaScript

イベントハンドラ
フォームのボタンをクリックするなど特定のイベントが発生した時に処理を実行する仕組みをイベントハンドラといいます。


フォームボタンなどがクリックされた時のイベントハンドラを「onclick」といいます。
イベントハンドラは次のようにHTMLタグの属性で指定し、JavaScriptを呼び出します。

<input type="フォームの部品" value="値" onclick="JavaScriptのコード">


＜例題１＞
フォームボタンをクリックすると「こんにちは」と表示されるプログラミングをします。
イベントハンドラ「onclick」を使います。

<?xml version="1.0" encoding="UTF-8" ?>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- イベントハンドラを使うときは、metaタグを記述します。 -->
<meta  http-equiv="Content-Script-Type" content="text/javascript"/>
<title>イベントハンドラ「onclick」</title>
</head>

<body>
<!-- ダブルクオテーションの中に文字列を書くときはシングルクォーテーションで囲む -->
<input  type="button" value="ボタン" onclick="alert('こんにちは')"/>
</body>

</html>


また、セミコロンで区切ることで複数の命令を実行することができます。

<input type="button" value="ボタン"
	onclick="alert('こんにちは');
	alert('ようこそJavaScriptの世界へ')"
/>


マウスカーソルが通過若しくは離れたときに行うイベントハンドラに「onmouseover」、「onmouseout」があります。


＜例題２＞
マウスオーバーで文字列と色が変わるプログラミングをします。
イベントパンドラ「onmouseover」、「onmouseout」を使います。

<?xml version="1.0" encoding="utf-8" ?>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta  http-equiv="Content-Script-Type" content="text/javascript"/>
<title>イベントハンドラ「onmouseover」</title>
</head>

<body>
<font color="#008080"
	onmouseover="this.color='#ff00ff'"
	onmouseout="this.color='#daa520'">
<span onmouseover="this.innerText='変わりましたか？'"
	onmouseout="this.innerText='マウスオーバーで文字が変わる'">
	マウスオーバーで文字が変わる
</span>
</font>
</body>

</html>