JavaScript + Chrome - 事件捕获

Question

我试图弄清楚事件是如何运作的。我有这段代码：

document.captureEvents(Event.MOUSEMOVE);    
document.onmousemove = mousePos;    
document.onkeypress = keyPressed;
var keyStroke = 0;
var mouseX = 0;
var mouseY = 0;
function mousePos(e) { 
    console.log(e); 
    mouseX = e.pageX;
    mouseY = e.pageY; 
    document.formex.mousex.value = mouseX; 
    document.formex.mousey.value = mouseY; 
    return true; 
}       
function keyPressed(e) { 
    console.log(e);
    keyClicked = e.key; 
    document.formex.keypress.value = keyStroke; 
    return true; 
}

让我感到困惑的是 - 在 keyPressed 函数内部console.log(e)产生键盘事件，在mousePos(e)内部产生鼠标事件。我不知道这两个"e"之间的区别是如何发生的？

Answer 1

让我感到困惑的是 - keyPressed函数内部产生console.log(e)产生KeyboardEvent，内部mousePos(e)产生MouseEvent.我不知道这两个"e"之间的区别是如何发生的？

浏览器创建事件对象并在文档元素上触发它们。当事件与键盘相关时，浏览器会创建一个KeyboardEvent。当它与鼠标相关时，它会触发一个MouseEvent。如果它与别的东西有关，它将创建并触发不同类型的事件。

"区分"基于导致触发事件的原因：键盘操作或鼠标操作。