Javascript dispatchEvent - Why is it needed?

Question

I have code which is written:

window.addEventListener("orientationchange", function() {
    //code here;
}, false);

And it works fine...but I am being told to add by the Mozilla dev page:

elem.dispatchEvent(event);

Can anyone tell me why I need to add the dispatch and why it is working without it (what the dispatch actually does would also be very useful!).

W3C also recommends in the specification to remove an event when done with it, but for an orientation change it could happen at any time, is it OK to leave it there?

Much obliged for any help.

This page: developer.mozilla.org/en-US/docs/Web/Guide/Events/… elem is just a place holder for whatever variable you are dealing with, event again is just a place holder for an event... — user1360809
– user1360809, Commented Jan 13, 2014 at 19:39

lemieuxster · Accepted Answer · 2014-01-13 19:37:37Z

9

addEventListener says that, on the object (window in your example) you want to react whenever that object dispatches and event with the a given type (e. g. orientationchange)

You are listening to an event from an object.

dispatchEvent is what you call if you want to send or trigger an event. Internally, the browser is doing this whenever the user rotates their device, which triggers orientationchange . In this specific example, you don't need to trigger this manually unless you need to do so for testing.

removeEventListener does what you'd expect, and makes it so that you no longer are listening for triggered events. It is usually good to do this if you know you no longer want to listen to the event or that the event will no longer be fired so that you can free up memory resources. For your case, it seems like you don't need to do this.

Here is more information about DOM and JavaScript Events, http://www.w3schools.com/jsref/dom_obj_event.asp.

answered Jan 13, 2014 at 19:37

lemieuxster

1,0817 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user1360809 Over a year ago

Great, thanks! So in a normal situation without a dispatch the event will not trigger? Does 'removeEventListener' simply stop the previous dispatch so to add it again all I need to do is dispatch again?

lemieuxster Over a year ago

I think "normal situation" entirely depends on which events you are talking about on which objects. removeEventListener removes the handler for the event. To add it again, use addEventListener. If you dispatch an event and nothing is listening, nothing will happen.

user1360809 Over a year ago

OK, so it depends on the events and or objects being discussed...is dispatched used to trigger the event in say an onClick for example? Also, when I execute addEventListener I presume I am adding it to a list or object somewhere and it remains active during the session, is this correct? If so do you know where it is added? Thanks!

lemieuxster Over a year ago

Many of the events like onClick will be dispatched natively by the browser. addEventListener does add your handler to a list somewhere, but I don't know off the top of my head if there is a way to access it. Cheers.

SK. · Accepted Answer · 2014-01-13 19:50:07Z

2

dispatch meaning send off to a destination or for a purpose.

dispatchEvent is the last step of the create-init-dispatch process, which is used for dispatching events into the implementation's event model.

EventTarget.dispatchEvent

Dispatches an Event at the specified EventTarget, invoking the affected EventListeners in the appropriate order. The normal event processing rules (including the capturing and optional bubbling phase) apply to events dispatched manually with dispatchEvent()

answered Jan 13, 2014 at 19:50

SK.

4,3885 gold badges33 silver badges51 bronze badges

Collectives™ on Stack Overflow

Javascript dispatchEvent - Why is it needed?

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related