Question

请考虑以下代码段：

<div onkeypress="console.log('parent');">
    <input type="text" onkeypress="console.log('child');">
</div>

两个嵌套元素都带有onkeypress -event。当我将光标放在结果输入中并按下键盘上的一个键时，我得到了

child
parent

按顺序登录到控制台。我的问题是，如果我可以指望它总是按顺序发射。即那个最里面的元素总会先开火？

Answer 1

是的，您可以，如MDN和W3所述，您可以指望最先发射的内部事件，当动作冒出时，后续事件将会触发。浏览器认为按键事件有所不同。

从QuirksMode开始:(从外面捕捉到内部的火焰，即向下箭头和内部冒泡的火焰，即向上箭头）。

array.append(road)

使用事件监听器，您可以使用第3个参数来指示捕获与冒泡。

array.append(list(road)) Capturing-> | | / \ <-Bubbling -----------------| |--| |----------------- | element1 | | | | | | -------------| |--| |----------- | | |element2 \ / | | | | | -------------------------------- | | W3C event model | ------------------------------------------ *default

element1.addEventListener('keypress',myScript,true) // Capture == element1.addEventListener('keypress',myScript,false) // Bubble

有一点需要注意，IE不遵循相同的模型，但你仍然可以依靠冒泡，即内外。

Answer 2

是的，它会。无论你是在html中添加事件处理程序（如在你的例子中）还是在js文件中。无论您在javascript文件中注册事件处理程序的顺序如何，正如Rob＆amp; Vinny，活动＆＃39;泡沫＆＃39;从元素。按键事件从dom元素输入开始，然后气泡到他的父母，然后到他父母的父母，依此类推。因此，事件处理程序将以相同的顺序触发。

你需要知道的全部吗？如果您有这两个独立处理程序的特定用例，您可以解释它是什么，我可以尝试编写解决方案，因为在您的示例中，我无法看到如何为同一事件执行2个操作在同一个元素上。

编辑：那么为什么不在文档上使用全局侦听器来检查焦点上的元素是否是输入？

Example on JSFiddle：

document.addEventListener('keypress', function(e){
  var key = String.fromCharCode(e.which),
      targetElt = e.target;

  if (key === 'a'){
    console.log('-- Action when "a" is pressed')
    if (targetElt.nodeName === 'INPUT') {
      console.log('-- Action when "a" is pressed and the focus is on an input');
    }
  } 
}, false);

如果你按下＆＃39;只有第一个console.log被调用，如果你按下＆＃39; a＆＃39;当焦点input时，console.log都会被调用。

如果您有多个密钥，我建议您使用switch语句而不是if / else if / else

由于

Answer 3

这取决于浏览器。但是，您可以通过在元素上放置addEventListener（）来决定执行顺序。

本指南深入解释： http://www.quirksmode.org/js/events_order.html

嵌套事件的优先级

3 个答案: