Event Work – How Event system works in Browser – Propagation

View Github Repository Open presentation in a new window

leftstick

See all presentation from leftstick

Event Work – How Event system works in Browser – Propagation

0 0

event-work

A slides tell how event works in JavaScript

On Github leftstick / event-work

Event Work

How Event system works in Browser

Created by Howard.Zuo / @leftstick

Propagation

Event Bubbling

                        / \
   ---------------------| |---------------------
   | element1           | |                    |
   |   -----------------| |----------------    |
   |   |element2        | |               |    |
   |   |   -------------| |------------   |    |
   |   |   |element3    | |           |   |    |
   |   |   ----------------------------   |    |
   |   ------------------------------------    |
   |           Event BUBBLING                  |
   ---------------------------------------------
The event handler of element3 fires first, the event handler of element1 fires last

Event Capturing

                        | |
   ---------------------| |--------------------
   | element1           | |                   |
   |   -----------------| |--------------     |
   |   |element2        | |             |     |
   |   |   -------------| |----------   |     |
   |   |   |element3    \ /         |   |     |
   |   |   --------------------------   |     |
   |   ----------------------------------     |
   |           Event CAPTURING                |
   --------------------------------------------
The event handler of element1 fires first, the event handler of element3 fires last

Event Model

W3C Model

                       | |  / \
   --------------------| |--| |--------------------
   | element1          | |  | |                   |
   |   ----------------| |--| |--------------     |
   |   |element2       | |  | |             |     |
   |   |   ------------| |--| |---------    |     |
   |   |   |element3   \ /  | |        |    |     |
   |   |   -----------------------------    |     |
   |   --------------------------------------     |
   |           W3C event model                    |
   ------------------------------------------------
W3C has very sensibly decided to take a middle position in this struggle. Any event taking place in the W3C event model is first captured until it reaches the target element and then bubbles up again.

Microsoft Event Model

It looks similar to W3C’s, but has some important drawbacks
  • Events always bubble, no capturing possibility
  • The event handling function is referenced, not copied, so the this keyword always refers to the window and is completely useless

Event Handling

W3C Event Model Handling

target.addEventListener(type, listener[, useCapture]);
Param Type Detail type string A string representing the event type to listen for listener function The object that receives a notification when an event of the specified type occurs. This must be an object implementing the EventListener interface, or simply a JavaScript function useCapture boolean If true, useCapture indicates that the user wishes to initiate capture. After initiating capture, all events of the specified type will be dispatched to the registered listener before being dispatched to any EventTarget beneath it in the DOM tree. Events which are bubbling upward through the tree will not trigger a listener designated to use capture. See DOM Level 3 Events and JavaScript Event order for a detailed explanation. If not specified, useCapture defaults to false

Microsoft Event Model Handling

target.attachEvent(event, handler);
Param Type Detail event string A string representing any of the standard DHTML Events, case-insensitive. Must have 'on' as prefix, For example: onclick handler function The handler function

How To Prevent Default Behavior

Prevent Default Magic

Calling preventDefault during any stage of event flow cancels the event, meaning that any default action normally taken by the implementation as a result of the event will not occur

Stop Propagation In Bubbling Phase

Stop Propagation In Capturing Phase

jQuery Event

Returning false from an event handler will automatically call event.stopPropagation() and event.preventDefault(). A false value can also be passed for the handler as a shorthand for function(){ return false; }. So, $( "a.disabled" ).on( "click", false ); attaches an event handler to all links with class "disabled" that prevents them from being followed when they are clicked and also stops the event from bubbling

THE END

Still Advertisements
Event Work How Event system works in Browser Created by Howard.Zuo / @leftstick