javascript - Firefox 缺少 window.event 的解决方法？

Question

这个问题已经有答案了:

Why Firefox says that window.event is undefined? (call function with added event listener) (6 个回答)

已关闭 5 年前。

我对 Firefox 缺乏 window.event 感到措手不及......即

<script>
function clicked()
{ 
 console.log(event);
}
</script>

<div onclick = "clicked()">Whatever</div>

几乎可以在所有现代浏览器中使用，但“事件”在 Firefox 中是未定义的，我们必须在其中显式编写

<script>
function clicked(event)
{ 
 console.log(event);
}
</script>

<div onclick = "clicked(event)">Whatever</div>

是否有任何可行的解决方法可以访问 Firefox 中的事件对象，而无需将其明确作为函数参数？

Answer 1

这是一个丑陋的黑客行为，基于所有事件监听器最终都会由 EventTarget.addEventListener() 注册的假设。方法。下面的“解决方案”更改了 EventTarget 的原型(prototype)(糟糕!)，以便将所有事件监听器包装在一个方法中，该方法将事件分配给 window.event，然后再委托(delegate)给实际的监听器。

const addEventListener = EventTarget.prototype.addEventListener;

EventTarget.prototype.addEventListener = function(name, handler) {
  addEventListener.call(this, name, function(event) {
    window.event = event;
    
    handler(event);
  })
};

function clicked() {
  // just demonstrating that window.event is set
  console.log(window.event.target.innerHTML);
}

document.getElementById('one').addEventListener('click', clicked);
document.getElementById('two').addEventListener('click', clicked);

<button id="one">Test 1</button>
<button id="two">Test 2</button>

以上仅说明了一种可能的方法，并且很大程度上未经测试。您的里程可能会有所不同。

<小时/>

更新

正如评论中所指出的，这对于通过 on... HTML 属性绑定(bind)或使用 Element.on... 分配的事件处理程序不起作用属性。

另一种(可以说更安全)的方法可能是在文档元素上使用事件捕获，并在那里执行对 window.event 的分配。

document.documentElement.addEventListener('click', function(event) {
  window.event = event;
}, true);

function clicked() {
  // just demonstrating that window.event is set
  console.log(window.event.target.innerHTML);
}

document.getElementById('one').addEventListener('click', clicked);
document.getElementById('two').onclick = clicked;

<button id="one">Test 1</button>
<button id="two">Test 2</button>
<button id="three" onclick="clicked()">Test 3</button>