Firefox의 window.event 부족 문제를 해결하려면?

Question

나는 즉

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

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

는 "이벤트"가 명시 적으로에 우리가 파이어 폭스에서 정의되지 않습니다 거의 모든 현대적인 브라우저, 아직에서 작동합니다 ... window.event를의 파이어 폭스의 부족으로 방심있다 쓰기

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

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

Firefox에서 이벤트 개체에 액세스하기위한 가능한 해결 방법은 함수 매개 변수로 명시 적으로 지정하지 않아도됩니까?

Answer 1

모든 이벤트 수신기가 궁극적으로 EventTarget.addEventListener() 메서드에 의해 등록된다고 가정 할 때 추한 해킹이 있습니다. 아래의 "솔루션"은 실제 청취자에게 위임하기 전에 window.event에 이벤트를 할당하는 메서드에서 모든 이벤트 리스너를 래핑하도록 EventTarget의 프로토 타입 (yuck!)을 변경합니다.

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>

상기

은 가능한 접근법을 도시 안된 크게된다. 귀하의 마일리지가 다를 수 있습니다.

---

업데이트

바와 같이 코멘트에 지적이는 Element.on... 속성을 사용하여 할당되거나 속성 on... HTML을 통해 바인딩 이벤트 핸들러에 대해 작동하지 않습니다.

대체 (및 틀림없이 더 안전한) 접근 방법은 문서 요소에서 이벤트 캡처를 사용하고 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>