Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Does javascript event handling occur inside or outside the program flow?

This question is related to Javascript event handling and flow control, but it is one step beyond. The question that remains unanswered is: when an event is fired and control is returned to the browser, could the browser decide to handle other events first (fired by other scripts or user action) (A), or will it always handle my event directly (B)?

Does javascript event handling occur outside (A) or inside (B) the program flow? The question is important, because in case (B) you can rely on the fact that nothing has been changed between firing the event and the event handler, while (A) gives no guarantees whatsoever.

My first guess is (B), how else could stopPropagation() and preventDefault() work? But giving it a second thought, it is no hard evidence.

A real-life example of this problem. I am modifying a rich text editor (hallo), and I want it to have these specs:

  • clicking on an editable text (#txt) will activate the editor, and clicking outside #txt will deactivate it. hallo uses blur and focus events on #txt to achieve this.
  • Activating the editor opens a toolbar, mousedown on the toolbar (but not on a button) will set a flag that prevents the blur event on #txt to deactivate the editor. The toolbar will return focus to #text.
  • mousedown on a toolbar button should also prevent deactivating the editor, but it should first wait till the click event, perform its action and then return focus to #txt. Some actions are immediate (bold or italic), while others need extra user input (selecting from a dropdown).
  • Some of these buttons open a dialog.
  • ...And I want all these elements (editor, toolbar, dialog) to be modular and easily extendable.

Now in most cases when you close a dialog you want the focus to return to #txt. But in the case where a dialog is opened and you click somewhere else on the page, the editor will close and call the toolbar, including the dialog to close as well. If in this case the dialog would return focus to the editor, it would activate the editor again.

As far as I understand now, the event handling order is at least deterministic. It is not possible that some event gets a delay while others are processed earlier. This is what is meant by 'synchronous'. The exception is of course events like loading a file.

From the perspective of a program component, say the dialog, the situation can be quite unpredictable. It can bind a handler to the open event, and then call dialog("open"), but anything can happen between the call and the handler, if only because the editor has an event handler on the same event.

So my conclusion is 1) yes it is predictable but 2) it needs a sophisticated architecture to implement this.

like image 541
Carlo Roosen Avatar asked Jun 01 '12 09:06

Carlo Roosen


People also ask

How does JavaScript event handling work?

To react to an event, you attach an event handler to it. This is a block of code (usually a JavaScript function that you as a programmer create) that runs when the event fires. When such a block of code is defined to run in response to an event, we say we are registering an event handler.

In what order does event flow occur after a click '?

That is: for a click on <td> the event first goes through the ancestors chain down to the element (capturing phase), then it reaches the target and triggers there (target phase), and then it goes up (bubbling phase), calling handlers on its way.

What are the two approaches for event handling in JavaScript?

DOM Level 2 Event Handlers provide two main methods for dealing with the registering/deregistering event listeners: addEventListener() – register an event handler. removeEventListener() – remove an event handler.

How is event handling done?

Event Handling is the mechanism that controls the event and decides what should happen if an event occurs. This mechanism have the code which is known as event handler that is executed when an event occurs. Java Uses the Delegation Event Model to handle the events.


1 Answers

In general the event model is synchronous and reentrant, meaning that if an event handler causes another event - the second event will be executed synchronously and only after completion will the first event continue executing.

This seems to be what you're trying to describe, in which case (B) is guaranteed.

Relevant source: http://www.w3.org/TR/DOM-Level-3-Events/#event-flow

like image 131
davin Avatar answered Sep 21 '22 00:09

davin