跨瀏覽器的Javascript監聽

Question

我有下面的代碼正常工作：

var links = document.getElementsByClassName('register'); 
for(var index = 0; index < links.length; ++index) 
{ 
    links[index].addEventListener('click', function(){ 
     var newMixpanelEvent = 'mixpanel.track("Click On Searched List", {"user is logged": "no"})'; 
     trackEvent(newMixpanelEvent); 
     }); 
} 

這只是監聽點擊事件，然後執行一個函數來創建一個事件Mixpanel。

現在，我需要檢查addEventListener功能和attachEvent，使其工作，幾乎所有的瀏覽器，所以我做的：

var links = document.getElementsByClassName('register'); 
for(var index = 0; index < links.length; ++index) 
{ 
    if(links[index].addEventListener) { 
     links[index].addEventListener('click', function(){ 
      var newMixpanelEvent = 'mixpanel.track("Click On Searched List", {"user is logged": "no"})'; 
      trackEvent(newMixpanelEvent); 
      });   
    } else if(links[index].attachEvent) { 
     links[index].attachEvent('onclick', function(){ 
      var newMixpanelEvent = 'mixpanel.track("Click On Searched List", {"user is logged": "no"})'; 
      trackEvent(newMixpanelEvent); 
      }); 
    } 
} 

但這不是射擊的事件。好像if(links[index].addEventListener)沒有通過。任何想法爲什麼？

Answer 1

那麼，上面的代碼正常工作。問題是我沒有清除緩存。這是我以前有和沒有工作：

if(window.addEventListener) { 
    ... 

但

if(links[index].addEventListener) { 
    ... 

工作的權利。

Answer 2

作爲最後的回退，您可以通過onclick屬性添加事件。您應該用邏輯來定義sperate函數，以檢查附加事件處理程序的可用方法。

function addCrossBrowserEvent(element, eventName, callback){ 
    if(element.addEventListener){ 
     element.addEventListener(eventName, callback); 
    } 
    else if(element.attachEvent){ 
     element.attachEvent('on' + eventName, callback); 
    } 
    else{ 
     element['on' + eventName] = callback; 
    } 
} 

用法：

addCrossBrowserEvent(myElement, 'click', function() { 
    alert('clicked'); 
}); 

注意：您也可以嘗試將其作爲設計原型HTML元素的擴展。

HTMLElement.prototype.addCrossBrowserEvent = function(eventName, callback) { 
    if(this.addEventListener){ 
     this.addEventListener(eventName, callback); 
    } 
    else if(this.attachEvent){ 
     this.attachEvent('on' + eventName, callback); 
    } 
    else{ 
     this['on' + eventName] = callback; 
    } 
} 

// Usage 
document.getElementById('elementId').addCrossBrowserEvent('click', function() { 
    // ... 
});