Question

var el = document.getElementsByClassName("elements"); // this element contains more than 1 DOMs.
el.onclick = function() { console.log("target name should be here")};

所以我不想要内联JS，我想在点击一个与任何其他元素具有相同类别的特定DOM时触发函数。
有人可以帮忙吗？

Answer 1

您无法将事件侦听器附加到对象数组，即该函数将返回。

而是遍历返回的列表并将事件侦听器附加到每个项目。

Answer 2

最好使用document.getElementsByClassName而不是document.querySelectorAll，因为getElementsbyClassName会返回实时HTMLCollection，而querySelectorAll会返回静态NodeList。

 var el = document.querySelectorAll(".elements"); // this element contains more than 1 DOMs.
    for(var i =0; i < el.length; i++) {
        el[i].onclick = function() { console.log("target name should be here")};
    }

如果您想跟踪事件处理程序中的元素计数，那么最好将事件处理程序包装在IIFE中

 var el = document.querySelectorAll(".elements"); // this element contains more than 1 DOMs.
 // as it contains a NodeList, it's desirable to iterate through the list and bind events.                   
  for(var i =0; i < el.length; i++) {
      // Inside the event handler function, if you want to access i, then its better to wrap it inside IIFE
      (function(i) {
            el[i].onclick = function() { console.log("target name should be here")};   
       })(i);
   }

Answer 3

您的选择器返回一个元素数组，因此您需要循环它们。

var els = document.getElementsByClassName("elements"); 
// loops els
for(var i = 0, x = els.length; i < x; i++) {
    els[i].onclick = function(){
        // do something
        console.log('target name should be here');
    }
}

Answer 4

var el = document.getElementsByClassName("elements"); 
// this element contains more than 1 DOMs.
for(var i=0;i < el.length;i++) {

el[i].addEventListener("click", function() { 
console.log("My index number is: " + i)});
}

这将遍历查询返回的节点列表，并在点击时将索引号返回到控制台。如果您需要获取特定元素并且页面是静态的（意味着索引将是相同的），您可以通过此过程获取索引号，然后更改代码以便在您指定的加载时：

var el = document.getElementsByClassName("elements"); 
// this element contains more than 1 DOMs.
var i = indexNumber; 
el[i].addEventListener("click", function() { 
// do whatever
});

其中var i是目标索引号。

Answer 5

您可以循环遍历el变量引用的所有元素，并根据需要在每个元素上附加事件处理程序，或者将事件处理程序委托给document，并相应地触发它。

无论您选择哪种方式，都应注意onclick prop及其兄弟姐妹未在HTMLCollection个实例或querySelectorAll()等返回的任何其他类似数组的对象上定义。

//ES6 syntax, registering a click event handler on each element 
[].slice.call(document.getElementsByClassName('elements')).forEach(ele => ele.onclick = () => console.log('whatever'));

//ES6, Event delegation
document.addEventListener('click', eve => {
  eve.target.classList.contains('elements') ? console.log('whatever') : undefined ; 
});

使用className.onclick JS调用函数

5 个答案: