【広告 No.01】

2015年6月6日土曜日

【Javascript】(小ネタ)特定の要素に対してaddEventListenerを設定する際によくある失敗についての解説と回避方法

【はじめに】

特定の要素に対してaddEventListenerを設定したつもりなのに、クリックしても編集してもスクリプトが実行されず途方に暮れたことはございませんか?

今回は特定の要素に対してaddEventListenerを設定する際によくある失敗についての解説と回避方法の小ネタです。



よくある間違い例

Sample01はよくある間違い例。getElementByIdでDOMを特定して、それに対してaddEventListenerを設定している、つもりです。
//idAへのクリックイベント(クリックでcallbackが実行されるハズ、、、)
document.getElementById('idA').addEventListener('click',callback,false);

構文は合っていますのでもちろん、Syntax Errorは出ません。しかし、これだけではイベントトリガーとしては動作しません。

よしんば動作したとしてもそれはたまたまで、恐らくスクリプト記述位置(bodyの閉じタグ直前など)による偶然の賜物です。

つまり、イベントトリガーを設定したい特定のDOM要素が読み込まれる前に、サンプルのようなスクリプトを記述すると、DOMを特定できないのでイベントトリガーを設定できないということですね。(コンソール画面で確認すればnullと表示されると思います。)

すべてのDOM要素が読み込まれた後

結論として、これを回避するにはすべてのDOM要素が読み込まれた後に設定する、ということになります。(Sample02参照)
document.addEventListener('DOMContentLoaded',function(){
    //idAへのクリックイベント設定
    document.getElementById('idA').addEventListener('click',function(){
        /* 処理内容 */
    },false);
},false);

以上「特定の要素に対してaddEventListenerを設定する際によくある失敗についての解説と回避方法」の小ネタでした。

【参考サイト】