【JavaScript】attachEvent / addEventListener の未定義エラー

Question

JavaScript 初級者です。
IE7対応の、jQueryを使わないJavaScriptが必要になり、下記の3つを作っているところです。

• ページトップへ戻る（非スムーススクロール）
• 前のページへ戻る
• 印刷ボタン

コードはこちらです。

var ua = navigator.userAgent.toLowerCase(), // ブラウザverを取得して小文字化
	ie7 = ua.indexOf("msie 7"), // 文字列検索
	ie8 = ua.indexOf("msie 8"),
	pageTop = document.getElementById("pagetop"), // ページトップ
	pageBack = document.getElementById("btn-back"), // 前のページへ
	paper = document.getElementById("btn-print") // 印刷
;


// IE7, IE8とそれ以外の切り替え
if (ie7 != -1 || ie8 != -1) {
	pageTop.attachEvent("onclick", function() {
		window.scrollTo(0, 0);
		event.cancelBubble = true;
	})
	pageBack.attachEvent("onclick", function() {
		history.back();
		event.cancelBubble = true;
	})
	paper.attachEvent("onclick", function() {
		window.print();
		event.cancelBubble = true;
	})
}
else {
	pageTop.addEventListener("click", function(e) {
		window.scrollTo(0, 0);
		e.stopPropagation();
	})
	pageBack.addEventListener("click", function(e) {
		history.back();
		e.stopPropagation();
	})
	paper.addEventListener("click", function(e) {
		window.print();
		e.stopPropagation();
	})
};

この場合、「印刷する」ボタンがないページを開くと、
Cannot read property 'addEventListener' of null
とエラーになります。

「未定義のイベントリスナーは使えないよ」という意味なのかと思いますが、どうすれば良いかわかりません。

ページに該当するボタン（ID）がなくても、エラーが出ないようにしたいのですが、お分かりの方はいらっしゃいませんか。

Answer 1

Cannot read property 'addEventListener' of null
このエラーは「イベントリスナーが未定義」というより、object.addEventListenerとなっている場合のobjectの部分がnullであることを表しています。

document.getElementByIdは、指定のIDが付与されたDOMがロードされる前にコールすると、指定されたIDのDOMが存在しないと判断してnullを返します。
その結果、上記のエラーが出ているのだと思われます。

IE9未満に対応しなくていいのならば、DOMContentLoadedが使えるのですが、

window.addEventListener('DOMContentLoaded', function() {
    // document.getElementById や addEventListener
}, false);

IE9未満に対応する場合は、こんな感じですかね。

var setDomLoadedListener = function(listenerFunc) {
    if (document.addEventListener) {
        document.addEventListener('DOMContentLoaded', listenerFunc, false);
    } else if (document.attachEvent) {
        // document.documentElement.doScroll('left') を利用した方法がjQueryで使われているとか、いないとか・・・   うろ覚えです
        var doScrollCheck = function() {
            try {
                document.documentElement.doScroll('left');
            } catch (e) {
                setTimeout(arguments.callee, 1);
                return;
            }
            listenerFunc();
        };
        doScrollCheck();
    }
};

setDomLoadedListener(function() {
    // document.getElementById や addEventListener
});

上記のコードは未検証な上に全く自信がないので、もしお試しいただく場合は、「うまく動いたらラッキー」みたいな気持ちで試してください。

Comments

[退会済みユーザー]

half_sleepingさん

ご回答くださりありがとうございます。
まだ初級者でして、書いて頂いたコードの意味すらわかりません（汗）。

少し調べてみますね。
この度は目に留めて頂き、どうもありがとうございました。

[ktanaka11]

別件で上記エラーメッセージを検索していた際
こちらの回答を発見し、大変勉強になりました。
ありがとうございます！

Answer 2

getElementByIdは未定義のIDに対してnullを返すので、

if (paper != null) {
  paper.addEventListener("click", function(e) {
     window.print();
     e.stopPropagation();
  })
}

みたいな感じで単純にnullだったら処理をスルーするようにすればいいかもしれません。

Comments

[退会済みユーザー]

yu-riさん
条件分岐でnullを外すことで、解決することができました。

＞getElementByIdは未定義のIDに対してnullを返すので、

そうなのですね、勉強になります。
この度はどうもありがとうございました。