is there any way to instrument javascript event handler firing using javascript? - javascript

is there any universal way to instrument javascript event handler firing using javascript?
for example, I want to do something before the event handler firing, so when to fire an event, I would like to execute my code first then the event handler code.
The problem is that there are multiple ways to register event handlers, I would like to handle all of them: html, javascript

No, there's not.
You can hook addEventListener and removeEventListener, which would allow you to intercept both the registration and invocation of event listeners by JS code. However, this will not capture event listeners set in ways such as elt.onclick. Nor of course will it catch listeners set up via the old IE attachEvent API. Most importantly, it will not help with you that events that are generated and listened for internally, such as a mouse click on a check box.
You might be tempted to hook createEvent and dispatchEvent in similar fashion, but that will capture only events that are explicitly created or dispatched in the JS code.

Related

Detect event listener from custom element (emitting events lazily)

I am writing a custom element and I want to periodically emit an event.
Emitting the event requires some work, so I was thinking maybe I can be lazy and only emit the event (and do the work) if there is a listener.
Is it possible to detect that someone is listening to an event (non bubbling)?
And in that case start emitting, until the listener is removed.
Or will the Javascript runtime be smart enough to not run the interval (where the only side effect is creating an event) when there is no listener?
With Javascript standard events, it appears you can't (unless you override the registration mechanism).
But with custom registering and callback methods, you can achieve this by implementing the Observer pattern.
Anyway, it you're lazy maybe it's easier to send useless events :-)

jQuery trigger() method

Could someone explain to me what exactly this means
trigger executes the code for the event handler but not actually executes the event itself?
Consider the following code:
$('#parent').on('click',function (event){
console.log(event);
});
$('#parent').trigger('click');
trigger does produce an Event object since it consoles it. So, in which way it does not execute the event?
jQuery has a rather nice event system, that handles events in a more complex way than the basic event bubbling. For instance it allows multiple events, of the same type, on an element.
That means that jQuery events sit on top of the browser events and add features. When you trigger a jQuery event it just send messages up the jQuery DOM tree, which causes things to respond, but it does not necessarily generate the native browser events.
You can still hit the native event generation by using the underlying DOM elements and methods that jQuery wraps:
// This will generate a click event "for jQuery to hear"
$('#parent').trigger('click');
or this does exactly the same as above:
$('#parent').click();
Whereas this will fire the native DOM click event "actually clicks the button/link":
$('#parent')[0].click();
Update (from A. Wolff):
Some jQuery click events are passed on to the native click event. An exception being anchor links (which do not). I would have to test it to see if native clicks are generated or not for buttons and other inputs.

Dispatch KeyHandler event to new DOM target with Google Closure (or plain Javascript)

I have a web-application that needs to capture any keyboard event on the page, and target them to the appropriate editable-div.
If the editable-div has focus, then the event flows to my event handler and to the DOM to push the character corresponding to the key into the DIV.
However, if the editable-div is not the current focus target, I am able to capture the event with my event handler, but the character corresponding to the key pressed is not pushed into the DIV.
My previous implementation had a dependency on jQuery, and $.trigger() was doing the right thing: moving the keyboard event from a non-matching target to the default editable-div I choose.
I am trying to achieve the same without jQuery, and with Google Closure. I tried various incantations of dispatchEvent without success in triggering the new virtual keypress.
In ClojureScript, trying to do something naive such as
(.dispatchEvent new-target (.getBrowserEvent event))
will cause the browser to complain that The event is already being dispatched.
Is there any simple solution to this problem?
You can use goog.testing.events/fireKeySequence to create events similar like jQuery's trigger.
More discussions.

how do I prevent event handlers to handle multiple events at once in javascript?

How do I prevent JavaScript from handling two events at once?
I have an event handler declared such as document.addEventListener('keydown',function(e)
{},false)
in this case, I do not want the handler to handle any events until it has finished with the current one.
Javascript is single threaded so the current event processing will finish before the next event is triggered. You do not have to do anything to guarantee that only one event is processed at a time.
You can learn more about this topic from these other posts:
How does JavaScript handle AJAX responses in the background? (describes how event queues in javascript operate)
Can JS event handlers interrupt execution of another handler?
Race conditions with JavaScript event handling?
There is nothing as simultaneous event handling. Event order depends upon which browser is being used. It is you who decides how to register an event either in capture or bubbling model or use both theses in w3c model.
For example in W3c model any event taking place in the W3c model is captured till the target is reached, and then it starts bubbling up again.
You can decide to register your event in either capturing or bubbling phases through the addEventListner() method.

Event listener vs event handler

Can someone explain what is the proper way to make certain actions call functions in javascript? Should I use event handlers like onclick="callFunction();"? Or should I use an event listener? If yes, how do they work?

Categories

Resources