AddEventListener不存在的对象，只有Javascript

AddEventListener to not exists object with only Javascript

本文关键字：只有 Javascript 对象 不存在 AddEventListener      更新时间：2023-09-26

我搜索了整个stackoverflow，但是我没有得到任何好的结果。如果我说错了请指正。

我想adddeventlistener对象存在或不存在的DOM。

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

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

但是我如何只用Javascript来实现它?下面是我的源代码。但是在页面加载后，所有新添加的对象都不附加click事件。

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

谢谢大家的建议。

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

你能做的就是将事件附加到父事件上，在事件处理程序中，查看目标是否为其中一个按钮，然后运行函数

<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属性，但我认为基于事件获取元素相当简单。目标对象。请记住，旧的IE没有addEventListener函数。查看这里的EventTarget。addEventListener - Web API接口| MDN

首先，您不需要第二个文档。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
相关文章：