javascript - javascript 事件处理发生在程序流内部还是外部?

标签 javascript event-handling program-flow

这个问题与Javascript event handling and flow control有关,但它更进一步。仍未得到解答的问题是:当一个事件被触发并将控制权返回给浏览器时,浏览器是否可以决定先处理其他事件(由其他脚本或用户操作触发)(A),还是它总是直接处理我的事件(乙)?

Does javascript event handling occur outside (A) or inside (B) the program flow? 这个问题很重要,因为在情况 (B) 中,您可以相信在触发事件和事件处理程序之间没有任何变化,而 (A) 不提供任何保证。

我的第一个猜测是 (B),stopPropagation() 和 preventDefault() 还能如何工作?但仔细想想,这并不是确凿的证据。

这个问题的真实例子。我正在修改富文本编辑器 (hallo),我希望它具有以下规范:

  • 单击可编辑文本 (#txt) 将激活编辑器,单击 #txt 以外的区域将停用它。 hallo 在 #txt 上使用 blur 和 focus 事件来实现这一点。
  • 激活编辑器会打开一个工具栏,工具栏上的鼠标按下(但不是按钮上)将设置一个标志,以防止 #txt 上的模糊事件停用编辑器。工具栏会将焦点返回到#text。
  • 在工具栏按钮上按下鼠标也应该防止停用编辑器,但它应该先等到单击事件,执行它的操作,然后将焦点返回到#txt。有些操作是即时的(粗体或斜体),而另一些则需要额外的用户输入(从下拉列表中选择)。
  • 其中一些按钮会打开一个对话框。
  • ...我希望所有这些元素(编辑器、工具栏、对话框)都是模块化的 并且易于扩展。

现在,在大多数情况下,当您关闭对话框时,您希望焦点返回到#txt。但是如果打开一个对话框并且您单击页面上的其他地方,编辑器将关闭并调用工具栏,包括要关闭的对话框。如果在这种情况下对话框将焦点返回到编辑器,它将再次激活编辑器。

据我现在的理解,事件处理顺序至少是确定性的。不可能某些事件得到延迟而其他事件得到较早处理。这就是“同步”的意思。当然,加载文件等事件除外。

从程序组件的 Angular 来看,比如对话框,情况可能非常难以预测。它可以将处理程序绑定(bind)到打开事件,然后调用 dialog("open"),但调用和处理程序之间可能发生任何事情,只要编辑器在同一事件上有一个事件处理程序即可。

所以我的结论是 1) 是的,它是可以预测的,但 2) 它需要一个复杂的架构来实现它。

最佳答案

一般来说,事件模型是同步和可重入的,这意味着如果一个事件处理程序引发另一个事件 - 第二个事件将同步执行,只有在完成后第一个事件才会继续执行。

这似乎是您要描述的内容,在这种情况下 (B) 是有保证的。

相关来源:http://www.w3.org/TR/DOM-Level-3-Events/#event-flow

关于javascript - javascript 事件处理发生在程序流内部还是外部?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10848184/

相关文章:

javascript - 填充下拉列表中的选定值

javascript - 简单 .on ('keydown' ) jQuery 事件在按下下一个键之前不响应

c# - 如何在 WPF 列表框中排序?

PHP "or"语法

java - 监听器和验证/重画

javascript - Rails、button_to 和 link_to、远程 : true scrolls page when clicked

javascript - 使用 JavaScript 返回 3 维数组中最大值的索引

javascript - 在将 Canvas 转换为 html5 中的图像后,当前上传的图像未设置在确切位置

javascript - 使用 for 循环和多个 if else 语句重构函数