ここは、ふぇりあ１６歳が不定期に連載しているオンライン小説のページです。

VNIふぇりあ16歳へ

ゼロからわかる現代JavaScript

６２．イベントリスナー

＊最新のＩＥが必要です。

さて、最初に説明したイベントとはどういうものだったでしょう？



<form>
<input type="button" value="ボタンから始まるよ" onclick="alert()">
</form>

そうですイベントを、メソッドに関連づけるものでした。

この方法は古典的な方法で現在も使われています。

今回使用するソースコード event.html
<!DOCTYPE html>
<html>

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Canvas Sample1</title>

<SCRIPT src="javascript.js"></SCRIPT>
</head>
<body>
<input id="old" type="button" value="通常のイベント" onClick = "warning()"/>

<p id="t1">ここをクリック！</p>
<input id="Button1" type="button" value="新しいイベントリスナー" />
</body>

</html>

次に、新しい流行のイベントリスナーというものを使ってみます。

このイベントリスナーとは

addEventListener(イベント名, メソッド, false);

という形で使います。イベント名を指定しメソッドを関連付けます。

つまり、前述のイベントと同じことを新しい形で行っています。

今回使用するソースコード javascrpt.js
function warning() {
　　alert("イベントリスナー");
}
function load() {
　　var el = document.getElementById("t1");
　　el.addEventListener("click", warning, false);
}

function load2() {
　　document.getElementById("t1").addEventListener("click", warning, false);
}

load3 = function() {
　　document.getElementById("Button1").addEventListener("click", warning, false);
}

////このあたりから一つ呼び出します

//Web ページがロードされたとき実行
addEventListener(window, 'onload', warning(), false);

//これも同じ
//document.addEventListener("DOMContentLoaded", load, false);

//これも同じ
window.addEventListener("load", load2);

//これも同じ
window.addEventListener("load", load3);

//無明関数を使う方法
//window.addEventListener("load", function () {

// document.getElementById("t1").addEventListener("click", function () {
// alert("イベントリスナー");

// }, false);

//}););

上記のようになります。

実行結果

コラム：

なぜイベントリスナーが必要なのか？第三引数って何なのか？
はぜひ調べてみてください。

とりあえず流行の方法だと覚えておくと、最近の流行のコードが読めて
良いと思います。

(C)著作権はふぇりあ１６歳とお兄ちゃんにあります。
無断転載、盗用は禁止です。