イベントハンドラとは、マウスなどの操作イベント時に、JavaScriptの何らかの処理を実行すること。
記述形式
イベントハンドラは、タグのイベント属性の値として指定する。
クリックイベント
クリックしたときに、何らかの処理を実行したければ、クリックイベント属性であるonclickの値に、処理を書く。
例えば、ボタンをクリックしたときに、何らかの処理を実行したければ、
<button onclick="処理">ボタン</button>
クリックイベントだけでなく、ダブルクリック時、フォーム送信時、ページ読み込み時など、イベントは多く存在する。
サンプル
挨拶:
サンプルの動作について
「朝の挨拶」ボタンをクリックすると、「挨拶: 」の右横に、「おはよう♪」と表示する。
「夜の挨拶」ボタンをクリックすると、「挨拶: 」の右横に、「こんばんは♪」と表示する。
サンプルのソースコード
bodyタグ<body></body>の中に、下記のJavaScriptとHTMLのソースコードを、埋め込む。
JavaScript
<script type="text/javascript">
function sampleA() {
document . getElementById( "sample" ) . innerHTML = "おはよう♪";
}
function sampleB() {
document . getElementById( "sample" ) . innerHTML = "こんばんは♪";
}
</script>
function sampleA() {
document . getElementById( "sample" ) . innerHTML = "おはよう♪";
}
function sampleB() {
document . getElementById( "sample" ) . innerHTML = "こんばんは♪";
}
</script>
HTML
<button onclick="sampleA()">朝の挨拶</button>
<button onclick="sampleB()">夜の挨拶</button>
<p>挨拶: <span id="sample"></span></p>
<button onclick="sampleB()">夜の挨拶</button>
<p>挨拶: <span id="sample"></span></p>