我知道内联事件处理程序会自动接收一个事件变量,就像这样:
<button onClick='someFunction(event);'>Act</button>
但是事件处理函数是如何自动将其包含在作用域中的呢?
<!DOCTYPE html>
<html>
<body>
<button id="print-btn">Print</button>
<script>
(function(){
const printBtn = document.querySelector('#print-btn');
printBtn.addEventListener('click', displayMessage);
function displayMessage(){
console.log(event); //Prints out a PointerEvent that we did not pass!
}
})();
</script>
</body>
</html>
我似乎找不到任何有关此行为的文档。
更奇怪的是,事件处理程序调用的其他函数仍然可以访问该对象。
const printBtn = document.querySelector('#print-btn');
printBtn.addEventListener('click', displayMessage);
function displayMessage(){
console.log("Display", event); //Prints out a PointerEvent that we did not pass!
doOtherStuff();
}
function doOtherStuff(){
console.log("Other stuff", event); //Even this one gets it!
}
所以我的问题是:
1.为什么会这样?
1.在这种情况下,事件对象的作用域是什么?是窗口吗?
1.既然事件似乎是沿着调用堆栈传递的,那么是否还有其他像这样传递参数的情况?
1条答案
按热度按时间yqkkidmi1#
在事件处理程序(非内联)中,
event
引用window.event
(除非被其他变量隐藏)。只读窗口属性事件返回当前由站点代码处理的事件。在事件处理程序的上下文之外,该值始终未定义。
请注意,此功能已弃用,您不应依赖它。
而是使用传递给事件处理程序函数的第一个参数。