javascript - jQueryを使用せずにクリックハンドラーを追加する方法

Question

IDを使用して要素に基本的なクリックハンドラーを追加したいと思います。通常はjQueryを使用しますが、vanillajsでそれを行う方法を忘れてしまいました。

jQueryを使用せずにこれを行うための最良の方法は何ですか？

$("#myBasic").click(function(){
  alert(“testString”);
});

Answer 1

on[event]非常に基本的な方法は、要素のプロパティに関数を割り当てることです。

document.getElementById("myBasic").onclick = function() { 
                                                 alert("testString");
                                             };

これは非常に幅広いブラウザサポートを備えており、ほとんどの基本的なケースに役立ちます

---

のような他のイベント処理機能もありますが.addEventListener(evt, fn, capture)、IEはIE9でのみサポートを開始しました。その前に、を使用する必要がありますattachEvent(onevt, fn)。これは似ていますが、同一ではありません。

の主な問題.attachEvent()は、を介してハンドラーをバインドした要素への自動参照が提供されないことですthis。ただし、その回避策があります。

---

かなりブラウザ互換のソリューションを作成するには、次のようにします。

function addListener(elem, type, fn) {
    if (elem.addEventListener) {
        elem.addEventListener(type, fn, false);

    } else if (elem.attachEvent) {
        elem.attachEvent("on" + type, function() {
                                          return fn.call(elem, window.event);
                                       });
    } else {
        elem["on" + type] = fn;
    }
}

そして、あなたはそれをこのように呼ぶでしょう：

var el = document.getElementById("myBasic");

addListener(el, "click", function(e) { alert(this.id); });

これはほとんどの状況をカバーするはずですが、.attachEventバージョンのメモリリークについては少し心配です。

---

これはすべて、ハンドラーのバインドのみを扱います。一貫したクロスブラウザの動作を得るには、オブジェクトの修正を準備する必要がありeventます。

Answer 2

最も単純なのは次のとおりです。

document.getElementById('myBasic').onclick = function() {
    // do something
};

最も正しい方法は次のとおりです。

var f = function() {
    // do something
};
if( document.body.attachEvent)
    document.getElementById('myBasic').attachEvent("onclick",f);
else
    document.getElementById('myBasic').addEventListener("click",f);

Answer 3

document.getElementById('myBasic').addEventListener("click",function(){alert("teststring")});