addEventListenerがIE8で機能しない


118

チェックボックスを動的に作成しました。私が使用しているaddEventListenerGoogleのChromeとFirefoxで動作しますが、チェックボックスのクリックで機能を呼び出すためにInternet Explorer 8で動作しません。これは私のコードです:

var _checkbox = document.createElement("input");
_checkbox.addEventListener("click", setCheckedValues, false);

setCheckedValues 私のイベントハンドラです。

回答:


215

試してください:

if (_checkbox.addEventListener) {
    _checkbox.addEventListener("click", setCheckedValues, false);
}
else {
    _checkbox.attachEvent("onclick", setCheckedValues);
}

更新: IE9より前のバージョンのInternet Explorerでは、attachEventメソッドを使用して、指定されたリスナーを、それが呼び出されるEventTargetに登録する必要があります。その他の場合は、addEventListenerを使用する必要があります。


1
これを使用する必要がある理由についての説明は、答えを改善します。
dkris

@dkrisが明確化として短い説明を追加しました。これにより状況が少し明確になることを願っています。:)
Sudhir Bastakoti

44

attachEventIE9より前のIEバージョンで使用する必要があります。addEventListenerが定義されているかどうかを検出し、定義されattachEventていない場合は使用します。

if(_checkbox.addEventListener)
    _checkbox.addEventListener("click",setCheckedValues,false);
else
    _checkbox.attachEvent("onclick",setCheckedValues);
//                         ^^ -- onclick, not click

IE11では削除されることにattachEvent注意してください。

以下も参照してください。


13

これもシンプルなクロスブラウザソリューションです。

var addEvent =  window.attachEvent||window.addEventListener;
var event = window.attachEvent ? 'onclick' : 'click';
addEvent(event, function(){
    alert('Hello!')
});

もちろん、「クリック」の代わりに任意のイベントを使用できます。


+1、これは賢い回避策だと思います!addEventListenerの3番目の引数はとにかくオプションなので、これは良い解決策になる可能性があり、if-elseブランチよりも優れています。しかし、この場合、_checkboxはターゲット要素であり、ではありませんwindow。:)そのため、イベントターゲットが別の引数である関数を作成することができます。
Sk8erPeter 2013年

ああ、私は早すぎる... :)私が取得upvoted :「不正な呼び出しはTypeError」私は別名イベントターゲット要素にしようとChromeでのaddEventListener通話-このトピックを参照してください。stackoverflow.com/questions/1007340/...を。したがって、windowオブジェクトの場合は正しく機能しますが、ドキュメント内の他のノードでは機能しません。このように、提案されたエイリアスは、元の質問で言及されたケースに対して正しくありません!あなたの回避策は何ですか?
Sk8erPeter 2013年

3

IEはaddEventListenerバージョン9までサポートしていないため、を使用する必要があります。以下にattachEvent例を示します。

if (!someElement.addEventListener) {
    _checkbox.attachEvent("onclick", setCheckedValues);
}
else {
    _checkbox.addEventListener("click", setCheckedValues, false);
}

2

イベント処理をテーブルなどの別の要素に委任すると、より簡単になります(パフォーマンスが向上します)。

$('idOfYourTable').on("click", "input:checkbox", function(){

});

このようにして、イベントハンドラは1つだけとなり、これは新しく追加された要素に対しても機能します。これにはjQuery> = 1.7が必要です

それ以外の場合はdelegate()を使用します

$('idOfYourTable').delegate("input:checkbox", "click", function(){

});

2

以下のaddEvent()関数を使用してほとんどのイベントを追加できますが、XMLHttpRequest if (el.attachEvent)はIE8でサポートされていないため失敗することに注意してください。代わりXMLHttpRequest.attachEvent()に使用する必要がありますXMLHttpRequest.onload = function() {}

function addEvent(el, e, f) {
    if (el.attachEvent) {
        return el.attachEvent('on'+e, f);
    }
    else {
        return el.addEventListener(e, f, false);
    }
}

var ajax = new XMLHttpRequest();
ajax.onload = function(e) {
}

2

上記の回答に基づいて簡単なポリフィルを選択しました:

//# Polyfill
window.addEventListener = window.addEventListener || function (e, f) { window.attachEvent('on' + e, f); };

//# Standard usage
window.addEventListener("message", function(){ /*...*/ }, false);

もちろん、上記の回答のようにwindow.attachEvent、これが存在することを保証するものではありません。


0

jQueryを使用する場合は、次のように記述できます。

$( _checkbox ).click( function( e ){ /*process event here*/ } )

0
if (document.addEventListener) {
    document.addEventListener("click", attachEvent, false);
}
else {
    document.attachEvent("onclick", attachEvent);
}
function attachEvent(ev) {
    var target = ev.target || ev.srcElement;
    // custom code
}
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.