跨浏览器的addevent功能javascript

时间:2015-02-02 19:35:50

标签: javascript cross-browser addeventlistener

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

好的,在收到@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
}

1 个答案:

答案 0 :(得分:1)

您正在尝试向数字添加事件。你应该替换&#34; i&#34;用&#34; buttonArray [i]&#34;并添加一个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");
    }
}