What exactly acts as a trigger for a custom event in Javascript
I read about special events and looked at a few examples. Perhaps I don't understand what special events are and how they work, and would be grateful for your help.
An example of a problem
To fire an event when the background color of a div changes from one color to another.
Situation A) Color changes as a result of user activity detected from script like onclick, onmouseover, onkeypress, then I would set a listener for these events and react accordingly. This I understand how to do it.
Situation B) The color changes as a result of user activity not being detected from the script, such as a new theme being applied to the page, then I understand correctly that the following is needed:
- I need to create a custom event for color change.
- Add a listener for the event to the corresponding DIV
- The listener needs to poll the DIV periodically to check for color changes.
Indeed, his step 3 I don't quite understand. If you are not polling the DIV, how does the event color change, event? In other words, how does the script know that a color change has occurred?
source to share
In JavaScript, a custom event is simply a message sent to all event listeners that says "Attention everyone: event X just happened!" Any listener that cares about this event can then run some function.
However, your custom event must still be triggered in some way. Custom events are not fired unless in your code you call .dispatchEvent
(or .trigger
, in jQuery). Your program should decide when it is time to trigger the event. If the browser does not fire an event that you can use as a label for your own event, then polling is often the only way to know when to fire an event.
The bottom line shows events - they are just messages . It is up to you and the code you write to decide when to run it.
source to share
Custom events are not like DOM events, they don't fire because there was some interaction in the browser. They happen when the person writing the code decides for them to happen. You must explicitly call the custom event when you need it.
For example, you might have a function like
function updateBackground (element, color) {
elmenet.css('background-color', color);
// element has to be an object that has `trigger` function on its prototype
// like jQuery wrapped element, for example
element.trigger('updated-background', color);
}
Then every time this code is executed, you will have this 'updated-background'
in context element
.
UPD .
Using browser options, the user can change the font size, background colors, etc., i.e. apply a new theme. As far as I know, there are no native events in javascript to handle them, so I will need to create a custom event in my script. I'm trying to ask how do you know when a custom event occurs?
You will know because you create them. You are correct as far as I know that there are no DOM events when the user changes the font background size / default, etc. You can poll custom body and fire events when changes are detected as you said.
source to share