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 类选择器

getElementsByClassName仅使用 javascript （尽管支持有限）：

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/

需要注意的一点是，某些版本的 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 回答