javascript addEventListenerの第二引数の無名関数について。
addEventListenerの第二引数には、第一引数で与えたイベント発生時に発火する関数を書くんですが、最初そこに「あらかじめ定義された関数の呼び出し」をそのまま書いておいたら、document読み込み時にその関数が発火してアレーってなったのでメモ。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
</header>
<body>
<div id="test1">test1</div>
<p>
郵便番号 : <input type="text" id="zipcode" />
<button id="search">住所検索</button>
住所: : <input type="text" id="address" />
<button id="run">起動</button>
</p>
</body>
<script>
var run = document.getElementById('run');
var func = function() {
alert("クリックしたよ");
};
run.addEventListener('click', function() {
alert("クリックされました!!")
}, false);
</script>
</html>色々実験してたから余計なものもあるけど、scriptの中身だけ注目。
この場合は、ちゃんと「起動」ボタンを押した時にalertされます。
そしてもう一方のこれ。最初はこういう風に書いていたのでアレーってなってました。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
</header>
<body>
<div id="test1">test1</div>
<p>
郵便番号 : <input type="text" id="zipcode" />
<button id="search">住所検索</button>
住所: : <input type="text" id="address" />
<button id="run">起動</button>
</p>
</body>
<script>
var run = document.getElementById('run');
var func = function() {
alert("クリックしたよ");
};
run.addEventListener('click', func(), false);
</script>
</html>
ドキュメント読み込み時に「クリックしたよ」とalert出る、、、。
これをやるなら、正しくはこうやで。
<script>
var run = document.getElementById('run');
var func = function() {
alert("クリックしたよ");
};
run.addEventListener('click', function(){
func();
}, false);
</script>addEventListenerの第二引数は「無名関数」の形でないとダメってことですね。
無名関数と有名(?)関数の関係がまだよく体に馴染んでないので、無名関数を指定すべきところで有名関数指定しちゃったりして動作が変なことがあるので、もうちょっと体に染み込ませにゃいかんですね。
