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 - 事件捕獲

回答

相關問題