addEventListener vs onclick

今天来说一说addEventListener来添加事件和直接添加的区别，下面用“onclick”事件作说明。

形式1：element.onclick = function () { }; //等价于内联的事件
形式2：element.addEventListener(‘click’, function () { } , false); //最后一个参数控制冒泡事件，为false则阻止事件冒泡。

区别

当对一个element绑定多个相同的事件时：

形式1：只执行最后绑定的那个事件，前面绑定的事件被覆盖。下面的例子中，只alert ‘b’.

element.onclick = function () { alert('a'); };
element.onclick = function () { alert('b'); };

形式2：依次执行多个绑定的事件。下面的例子中，先后alert ‘a’ 和 ‘b’.

element.addEventListener('click',function(){alert('a');},false);
element.addEventListener('click',function(){alert('b');},false);

addEventListener的兼容性

低于ie9的ie浏览器不支持addEventListener, 需要使用attachEvent

element.attachEvent('onclick', function () { });

兼容的写法：

• 使用jQuery

  $(element).on('click', function () { /* do stuff */ });

• 使用javascript做兼容性处理

  function addEvent(element, evnt, funct){
    if (element.attachEvent)
     return element.attachEvent('on'+evnt, funct);
    else
     return element.addEventListener(evnt, funct, false);
  }
  addEvent(
      document.getElementById('myElement'),
      'click',
      function () { }
  );

【参考】http://stackoverflow.com/questions/6348494/addeventlistener-vs-onclick