document.getElementsByClassName().onclick 与动态元素

Question

我正在创建一个 Javascript 程序，我想通过其类名对元素进行样式更改。有多个具有此类名称的元素，但我想定位被单击的那个。这些是动态创建的。

我没有粘贴我的代码的原因是因为我不想要基于我正在做的事情的答案，我只想知道如何做到这一点。

对不起，如果这有任何混淆。

Answer 1

您可以尝试以下方法：

const buttons = [].slice.call(document.getElementsByClassName('someclass'))


function classToggler(classToAssign, e) {
  e.target.classList.toggle(classToAssign)
}
buttons.forEach(button => {
  button.addEventListener('click', e => classToggler('classToAssign', e))
})

.classToAssign {
  background: black;
  color: #fff;
}

<button class="someclass">Click me 1</button>
<button class="someclass">Click me 2</button>
<button class="someclass">Click me 3</button>
<button class="someclass">Click me 4</button>
<button class="someclass">Click me 5</button>

恢复的是：

1. 收集具有特定类的所有按钮并使其成为可迭代数组
2. 创建一个函数来切换可以作为参数传递的特定类
3. 为每个传递点击事件的按钮添加一个点击事件侦听器，这样您就可以只定位该特定按钮

Answer 2

使用querySelectorAll 获取所有元素并添加事件监听器。在回调函数中event 参数有target 属性，这是被点击的元素。

document.querySelector('.className').addEventListener(event => {
    // event.target is the element that is clicked
});

Answer 3

这将遍历所有类名为 .your-class-goes-here 的元素，并向它们添加一个 onclick 事件处理程序，该处理程序只是将元素本身记录到控制台。

document.querySelectorAll('.your-class-goes-here').forEach((el) => el.addEventListener("click", function(){console.log(this);}));

出于浏览器向后兼容性（低至 IE8）的原因：

var els = document.querySelectorAll('.your-class-goes-here'),
    i = 0,
    backwards = false,
    len = els.length;

for(; i< len; i++) {
    var el = els[i];
    if (i === 0) {
        if (!el.addEventListener) backwards = true;
    }
    if (backwards) {
        el.attachEvent("click", function(evt){alert("hey");});
    } else {
        el.addEventListener("click", function(evt){alert("hey");});
    }
}

Answer 4

感谢梅尔·马卡卢索。

我的问题是 .classToAssign 被添加到我的内部标签 (h4) 中。

<button class="someclass"><h4>Click me 3</h4></button>

解决方案是为内部标签添加一个 css 以禁用指针事件：

.someclass h4 {pointer-events: none;}