JavaScript + Chrome - 事件捕获

我想弄清楚事件是如何工作的。我有这样一段代码：JavaScript + Chrome - 事件捕获

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)产生的KeyboardEvent的mousePos(e)里面产生的MouseEvent。我不知道这两个区别如何发生？

来源

2016-07-16 Yevgeny Kozlov

'captureEvents'既是非标准的，也是弃用的。你使用它的目标是什么？ –

嗨，在这一点上，我的目标纯粹是学术性的 - 更好地理解浏览器如何区分这两个参数，尽管表面上它们看起来完全相同。谢谢。 –

我理解这个问题的总体目标。具体来说，使用非标准的，弃用的函数作为其一部分的目标是什么？ –

什么让我困惑 - keyPressed功能console.log(e)产量KeyboardEvent内的mousePos(e)里面产生MouseEvent。我不知道这两个'e'是如何区分的？

浏览器创建事件对象并在文档元素处触发它们。当事件与键盘相关时，浏览器会创建一个KeyboardEvent。当它涉及到鼠标时，它会触发一个MouseEvent。如果它与其他事物有关，它会创造并发起一种不同的事件。

“差异化”基于导致事件被触发的原因：键盘动作或鼠标动作。

来源

2016-07-16 08:15:40

具有完美的感觉，但我有一种感觉，我错过了一些基本的东西。让我困惑的部分：'document.onmousemove = mousePos; document.onkeypress = keyPressed; '。我们是否从左到右阅读（在mousemove上调用'mousePos'文件并传递你的'e'）？ –

@YevgenyKozlov：有效的，是的。请注意，以这种方式附加事件处理程序并不是真正的首选，最好使用addEventListener代替。 –

JavaScript + Chrome - 事件捕获

回答

相关问题