HTML要素とイベントハンドラの関連付け

イベントハンドラの実行方法をテストします。

1:

2:

3:

4:

5:

1,2)タグ内のインライン イベント属性に、Scriptコードや関数を記述。同時に複数のコードや関数を実行することも可能。

3)タグ外でエレメントのイベントプロパティにイベントハンドラ関数を関連付ける。そのイベントプロパティを呼び出すと連結した関数が実行される。
(注意)イベントプロパティ名は全て小文字にし、呼び出す関数は名前だけ記述し()は付けないこと。

4)タグ外の<script language="JavaScript">〜</script>構文内で、function ID名.イベントハンドラ名() { }の関数形式で呼び出す。ただし、ID名の定義より後に記述すること。先に記述すると”(ID名)のオブジェクトが見つからない..”というエラーに。

5) <SCRIPT FOR=対象のHTML要素のID名 EVENT=イベントハンドラ LANGUAGE="JavaScript">形式で。IEの独自仕様か?

Sample

Sample Source......................................................................>>>

<script language="JavaScript"><!--
function Func() {
alert("onclickイベントを実行しました!");
}
// --></script>
<script for="btn5" event="onclick" language="JavaScript"><!--
alert("onclickイベントを実行しました!");
// --></script>
</head>
<body>

<form name="form1">
1:<input type="button" name="btn1" value="タグ内のイベントハンドラでScriptコードを直接実行"
onclick="alert('onclickイベントでScriptコードを直接実行しました!');"><br>
2:<input type="button" name="btn2" value="タグ内のイベントハンドラで関数を呼び出す"
onclick="Func();"><br>
3::<input type="button" name="btn3" value="タグ外でイベントプロパティとして呼び出す"><br>
<script language="JavaScript"><!--
form1.btn3.onclick = Func;
// --></script>
4:<input type="button" name="btn4" value="タグ外でイベントハンドラを関数形式で呼び出す"><br>
<script language="JavaScript"><!--
function form1.btn4.onclick() {
alert("関数形式でonclickイベントを実行しました!");
}
// --></script>
5:<input type="button" name="btn5" value="タグ外で&lt;script for=&quot;&quot; event=&quot;&quot;&gt;形式で呼び出す">
</form>

(最終更新:12/11/26)
フレーム構成になっています・・・<[ホーム] >> [HTML整理ノート]>