Question

我搜索整个stackoverflow但是我没有得到任何好的结果来解决这个问题。如果我错了，请更正我。

我想将addEventListener添加到DOM中存在或尚未存在的对象中。

在Jquery中，我们可以简单地执行以下代码：

$('document').on('click', '.my-button', function () {
    alert("work!!!");
});

但是我怎样才能使用Javascript来实现呢？以下是我的源代码。但是在页面加载后，所有新添加的对象都没有附加点击事件。

var Button = document.getElementsByClassName("my-button");
for(i=0;i<Button.length;i++){
    document.getElementsByClassName("my-button")[i].addEventListener("click",function(){
        alert("Work!!!!");
    });
}

暗示任何建议。

Answer 1

jQuery不会将事件监听器添加到每个div，而是将其附加到父级。

您可以做的是将事件附加到父级，并在事件处理程序中，看到目标是其中一个按钮，然后运行您的函数

<强> HTML

<div id="parent">
     <div class="my-button">one</div>
     <div class="my-button">two</div>
     <div class="my-button">three</div>
</div>

<强> JS

document.getElementById("parent").addEventListener("click", function(event) {
     if ( event.target.className === 'my-button') {
          //Do your magic
     }
});

这样，您添加的每个按钮都将运行您的功能。我不知道事件目标是否具有className属性，但我认为基于event.target对象获取元素相当简单。请记住，较旧的IE不具备addEventListener功能。点击EventTarget.addEventListener - Web API Interfaces | MDN

Answer 2

好吧，首先你不需要第二个文件.getElementsByClssName，其次IE有一个特殊的功能。

var buttons = document.getElementsByClassName("my-button");
for(i=0;i<buttons.length;i++){


    // For modern browsers
    if( buttons[i].addEventListener ) {
        buttons[i].addEventListener("click",function(){
            alert("Work!!!!");
        }, false );
    }

    // For outdated IE
    else if( buttons[i].attachEvent ) {
        buttons[i].attachEvent("onclick",function(){
            alert("Work!!!!");
        });
    }
}

编辑：

你也可以使用按钮数组作为动态创建的东西，即：

var button1 = document.createElement( 'button' );
var button2 = document.createElement( 'button' );
var buttons = [ button1, button2 ]

// Rest of code above

仅使用Javascript将AddEventListener添加到不存在的对象

2 个答案: