javascript - 跨浏览器addevent函数javascript

Question

我正在尝试创建一个函数，向类中的每个按钮添加一个事件。我将所有按钮都放在一个数组中，并想使用 Dustin Diaz's addevent() cross browser solution ，但不确定如何实现。我习惯于使用框架来完成这类事情，但必须使用纯 JS 来做这件事。任何有关如何使用达斯汀解决方案的指示或建议将不胜感激。

好吧，在听取了 @Pointy 的建议后，我写了这个来检查 addEventListener ，如果没有，则使用 attachEvent 但这并没有调用 testFunction()。我在这里做错了什么？

function addEvents()
{
  var buttonArray=document.getElementsByClassName('mainButton');

  for(i=0; i < buttonArray.length; i++)
  {
    if (i.addEventListener) {
      i.addEventListener("click", testFunction);
    } 
    else if (i.attachEvent) {
      i.attachEvent("onclick", testFunction);
    }

    function testFunction() {
      alert("Test");
    } 
  }

  // Attach an event to each button that when clicked on will display an alert that say 'Button X clicked' where X = the button ID
}

Answer 1

您正在尝试将事件添加到号码。您应该将“i”替换为“buttonArray[i]”并添加 else-case(防御性编码)。

function addEvents() {
    var buttonArray = document.getElementsByClassName('mainButton');
    for(i = 0; i < buttonArray.length; i++) {    
        if (buttonArray[i].addEventListener) {
            buttonArray[i].addEventListener("click", testFunction);
        } else if (buttonArray[i].attachEvent) {
            buttonArray[i].attachEvent("onclick", testFunction);
        } else {
            throw new Error("This should be unreachable");
        }
    }

    function testFunction() {
        alert("Test");
    }
}