0

たとえば、次のようなHTML形式のイベントがあります。

<div onclick="bla(this)" class="gg">

onclick="bla(this)"HTMLで記述しないことにより、すべてのgg要素にイベントリスナー/ハンドラーを追加するにはどうすればよいでしょうか。

私はこのようなことを試みました。しかしもちろん、それは機能しません。

var ggs = document.getElementsByClassName('gg');
for (var i = 0; i < ggs.length; i++) {
// the 'this' below needs to go somewhere to become working
    ggs[i].addEventListener('click',bla,this); 
}

編集：元のコードはhttp://jsfiddle.net/pVpaV/2/で機能します。コードを機能させるには、ページの最後にコードを配置する必要があります。

4

4 に答える 4

4

元の状態で使用し続ける必要がある場合blaは、それをラップして適切なパラメーターを渡す必要があります。

var ggs,
    i;
ggs = document.getElementsByClassName('gg');
for (i = 0; i < ggs.length; i++) {
    ggs[i].addEventListener('click', function (e) {
        //in the event handler, `this` refers to the clicked element
        bla(this);
    }, false);
}

blaイベントをトリガーした要素のコンテキストで呼び出す必要がある場合addEventListener は、デフォルトですでに呼び出しています。

var ggs,
    i;
function bla(e) {
    //`e` is event data
    //`this` is the element that triggered the event
}
ggs = document.getElementsByClassName('gg');
for (i = 0; i < ggs.length; i++) {
    ggs[i].addEventListener('click', bla, false);
}
于 2012-09-15T20:51:56.230 に答える
1

だからあなたがしたいclickのは、クラスを持つdivのイベントを処理することですgg

jQueryはこれを非常に簡単に行うことができます

$('.gg').click(function() {
// some code you want to execute on click
});

ここでjQueryクラスセレクターを確認できます

javascriptだけで（サポートgetElementsByClassNameは制限されていますが）：

var ggs = document.getElementsByClassName('gg');
for (var i = 0; i < ggs.length; i++)
{
    ggs[i].addEventListener('click', function() { bla(this); }, true);
}
function bla(param)
{
    // some very sinister code that uses this (which is param in this context)
    alert(param);
}
于 2012-09-15T20:47:51.440 に答える
1

blaという関数があれば、コードは正常に機能するはずです。

http://jsfiddle.net/pVpaV/

注意すべき点の1つは、IEの一部のバージョンはattachEvent（）と呼ばれるレガシーメソッドを使用することです。どのブラウザを使用していますか？

于 2012-09-15T20:56:03.387 に答える
0 
var ggs = document.getElementsByClassName('gg');
for(var i = 0; i < ggs.length; i++) {
    ggs[i].addEventListener('click', bla);
}

thisを使用する場合と同様に、要素は自動的に渡されaddEventListenerます。実際には関数内で使用する必要があることに注意してくださいthis。これは引数ではありません。引数が必要な場合、最も簡単で移植性の高い方法は次のとおりです。

var ggs = document.getElementsByClassName('gg');
for(var i = 0; i < ggs.length; i++) {
    ggs[i].addEventListener('click', function() {
        bla(this);
    });
}

ただし、この場合、追加の引数として渡さない限り、ブラウザから関数に渡されたイベントオブジェクトにアクセスすることはできません。

    ggs[i].addEventListener('click', function(e) {
        bla(this, e);
    });
于 2012-09-15T20:51:10.737 に答える