trigger & dispatchEvent

[7cc]

updated @ 2014/02/04

trigger & dispatchEvent are different

Don't replace $.trigger & dispatchEvent simply.

FIrst, $.trigger does browser default actions if possible.

$(el).trigger("click") // do click()
$(el).trigger("focus") // do focus()

dispatchEvent does not. It simply dispatches event object.

el.dispatchEvent( new Event("click") ) // no click
el.dispatchEvent( new Event("focus") ) // no click

(new Event and document.createEvent('HTMLEvents') are the same. I'm using new Event just because it's short.)

Basically, created events by script do not trigger browser default actions.
Click event is special. new MouseEvent("click") does browser default click.
http://www.w3.org/TR/DOM-Level-3-Events/#trusted-events

Expample

click

replaceable

$("#id").trigger("click") // click()
el.dispatchEvent( new MouseEvent("click", {bubbles: true}) ) // i'm not sure about cancelable

not replaceable

$("#id").trigger("click") // click()
el.dispatchEvent( new Event("click", {bubbles: true}) )  // no click

replaceable

$("#id").triggerHandler("click") // no click
el.dispatchEvent( new Event("click", {bubbles: false}) ) // no click

other

replaceable

$("#id").trigger("change") // no change
el.dispatchEvent( new Event("change", {bubbles: true}) ) // no change

not replaceable

$("#id").trigger("focus") // focus()
el.dispatchEvent( new Event("focus", {bubbles: true}) ) // no focus
el.dispatchEvent( new FocusEvent("focus", {bubbles: true}) ) // no focus

demo:
http://jsfiddle.net/uS636/1/

---

Second, $.trigger runs on all matched elements.

$("p").trigger("click") // click all <p> elements

In pure JS,

Array.prototype.forEach.call(document.querySelectorAll("p"), function(e){
  e.dispatchEvent( new MouseEvent("click", {bubbles: true}) )
})

There are many other differences.
So you can't replace $.trigger & dispatchEvent that simply.

Trigger Custom / Trigger Native

Eventlistener does not see event interface.
Eventlistener just responds to event.type.
The following two event object invoke Eventlistener's callback.

// code in Trigger Custom
event = new CustomEvent('change')
el.dispatchEvent(event)

// code in Trigger Native
event = document.createEvent('HTMLEvents')
event.initEvent('change', true, false)
el.dispatchEvent(event)

Demo:
http://jsfiddle.net/McZpC/2/

change event has no default action. There are no difference between dispatching (a)Event whose type is change and (b)CustomEvent whose type is change

But when the event type is click, there IS a difference.

// same
$("#id").trigger("change")
el.dispatchEvent( new Event("change", {bubbles: true}) )

// diff
$("#id").trigger("click")
el.dispatchEvent( new Event("change", {bubbles: true}) )

So it's not appropriate to use 'change' event as Trigger Native example.

Solution

(i remove this section. it was not correct, sorry)

[WavinFlag]

Basically, created events by script do not trigger browser default actions.
Click event is special. new MouseEvent("click") does browser default click.

Thanks!
Wish to have seen this early. Cost me half a day to figure it out.

The only good thing is that, with half a day of searching the web and reading articles, I'm now so impressed of those differences and mechanisms...

[chetan-reddi]

how to pass token in dispatch event?

[migliori]

Hi,

The "Trigger Native" code uses event.initEvent, which is now deprecated.