主にプログラミングに関して。Python, .NET Framework(C#), JavaScript, その他いくらか。
記事にあるサンプルやコードは要検証。使用に際しては責任を負いかねます

スポンサーサイト

                
tags:
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

JavaScript, html: addEventListenerを使った方がいい理由

                
tags: JavaScript
オライリーのサイ本を読んでいたときだろうか。Webページをつくるとき、要素にイベントを設定したければ、JavaScriptでaddEventListenerを使うのが良いとどこかで読んだ。自分なりに考えるところがあったのでメモしておく。

そもそも。DOM要素へのイベント追加の方法は、HTML上で行うやり方とJavaScript上でおこなうやり方がある。

<script>function foo(){}</script>
<div onclick="foo();">foo</div>

function foo(){return;}
document.getElementById("id").addEventListener("click", foo, false);


HTMLで行う場合だと、なにか保持したい値があったときにグローバル変数を使うことになってしまう。
<script>
var clicked = 0;
function foo(){alert(clicked++)}
</script>
<div onclick="foo();">foo</div>


JavaScriptでやる場合なら、書いたスクリプトをそのまま匿名関数に入れて即時実行するように書けば、グローバル変数を使うことなく変数を保持できる。

(function(){
var clicked = 0;
function foo(){alert(clicked++);};
document.getElementById("id").addEventListener("click", foo, false);
})();


一見シンプルなGoogleの検索ページでも10を超えるスクリプトが書かれている。変数の重複による上書きを避けるためにも、グローバル変数を使うのは避けていきたい。

そのほかの利点の参考
https://developer.mozilla.org/ja/docs/Web/API/EventTarget.addEventListener#Why_use_addEventListener.3F
            

コメントの投稿

非公開コメント

プロフィール

hMatoba

Author:hMatoba
Github

最新記事
リンク
作ったものなど
月別アーカイブ
カテゴリ
タグリスト

検索フォーム
Amazon
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。