Firefox 中的默認事件對象？

Question

我正在開發一個舊應用程序，用於將其從 IE8/9 遷移到 Firefox。 它應該在兩者上兼容。 由於它是一個非常古老的應用程序，它不使用 jQuery。 客戶也不想將 jQuery 添加到此頁面。 我發現了一個奇怪的問題。 以下是簡單形式的示例：

 <html> <head> <script> function test(){ console.log(event); } </script> </head> <body > <button onclick="test()">Test</button> </body> </html>

當我單擊“ Test按鈕時，Firefox 顯示一個錯誤，即沒有定義event ，因為 IE 顯示了一個默認事件。 我的應用程序經常使用這個事件對象。 任何人都知道如何在 Firefox 中獲得它？

在此處輸入圖片說明

Answer 1

您的代碼依賴於 IE 事件模型，它為每個事件創建一個全局window.event對象。 它已被棄用，以支持 W3C 事件模型（由 Firefox 和其他人支持），但仍受 IE 支持以實現向后兼容性。

您需要將事件對象傳遞給函數：

<button onclick="test(event)">Test</button>

然后在函數中：

function test(event){
    alert(event);
}

如果您使用addEventListner附加偵聽器，則默認情況下，事件對象將作為第一個參數傳遞給偵聽器：

document.querySelector('#buttonID').addEventListener('click', test, false);

您還可以直接將偵聽器添加為屬性：

document.querySelector('#buttonID').onclick = test;

它將事件對象作為 W3C 事件模型中的第一個參數傳遞，但不在 IE 中傳遞，因此如果事件未定義，該函數必須測試並使用window.event ：

function test(event){
    event = event  || window.event;
    console.log(event);
}

添加適用於所有瀏覽器的偵聽器的一個非常簡單的函數是：

function addEvent(element, event, fn) {
  if (element.addEventListener) {
    element.addEventListener(event, fn, false);
  } else if (element.attachEvent) {
    element.attachEvent('on' + event, fn);
  }
}

請注意，在 IE 中，這不會設置為調用事件的元素。 如果你需要解決這個問題，那么以下將做到這一點：

function addEvent(element, evt, fn) {
  if (element.addEventListener) {
    element.addEventListener(evt, fn, false);
  } else if (element.attachEvent) {
    element.attachEvent('on' + evt, function() {
      fn.call(element, event);
    });
  }
}

並像這樣使用它：

addEvent(document.getElementById('buttonID', 'click', test);

還有更復雜的版本，但以上應該足夠了。 雖然它會創建不必要的循環引用，但您可能希望避免這些。 要做到這一點，你需要類似的東西：

function addEvent(element, evt, fn) {
  if (element.addEventListener) {
    element.addEventListener(evt, fn, false);
  } else if (element.attachEvent) {
    element.attachEvent('on' + evt, (function(fn, element) {
      return function() {
        fn.call(element, event);
      };
    }(fn, element)));
  }
  // Remove obvious circular reference
  element = null;
}

最重要的是，在絕大多數情況下，將偵聽器添加為屬性很簡單、跨瀏覽器並且足夠了。 只有當您需要為同一事件的元素添加多個偵聽器時，它才會失敗，但即使如此也很容易適應。

Answer 2

在實現上存在跨瀏覽器差異。 IE 使用（並且仍在使用） window.event對象，而 Firefox 從未以這種方式實現它。 相反，Firefox 支持將事件對象傳遞給事件處理程序。 嘗試這個：

function test(event) {
    console.log(event);
}

並在 HTML 中：

<button onclick="test(event)">Test</button>

作為另一種可能性，由於您必須支持 IE8，您可以通過直接分配onclick函數來將事件注冊為屬性：

buttonObject.onclick = test;

其中buttonObject是對通過某些 DOM 方法（ document.getElementById 、 document.querySelector等）獲得的按鈕 HTMLElement 的引用。

請注意，在這種情況下，測試函數需要對window.event對象使用事件回退（以使 IE8 滿意）：

function test(event) {
    event = event || window.event;
    console.log(event);
}

|| 運算符確保事件將被正確填充：在 Firefox 和 IE9+ event參數將可用，在 IE<9 event參數將是未定義的，將使用window.event 。

Firefox 中的默認事件對象？

問題描述

2 個解決方案

解決方案1
4 2014-12-11 14:13:41

解決方案2
3 2014-12-11 14:13:33

Firefox 中的默認事件對象？

問題描述

2 個解決方案

解決方案1 4 2014-12-11 14:13:41

解決方案2 3 2014-12-11 14:13:33

解決方案1
4 2014-12-11 14:13:41

解決方案2
3 2014-12-11 14:13:33