12-events

Events

_{http://www.quirksmode.org/js/introevents.html
http://www.sprymedia.co.uk/article/Visual+Event}

• Every action (click, change, …) happening in the browser is comunicated (to whom wants to listend) in the form of an event From Javascript we can escuchar these events and associate a function (event handler) that will be executed when the event occurs

• When we click in a link (a), we also do click in its container (li,ul), in the body and finally in the document. This is what is called event propagation

Capturing events

_{http://ejohn.org/projects/flexible-javascript-events/
http://www.webmonkey.com/2010/02/javascript_events/
http://www.elated.com/articles/events-and-event-handlers/
http://www.anieto2k.com/2006/10/16/gestion-de-eventos-en-javascript/}

    function callback(evt) {
        // prep work
        evt = evt || window.event;
        var target = (typeof evt.target !== 'undefined') ? evt.target :
        evt.srcElement;
        // actual callback work
        console.log(target.nodeName);
    }
    
    // start listening for click events
    if (document.addEventListener){ // FF
        document.addEventListener('click', callback, false);
    } else if (document.attachEvent){ // IE
        document.attachEvent('onclick', callback);
    } else {
        document.onclick = callback;
    }

• We can capture events with the traditional model

  This model consist on assign a function to the property onclick, onchange,... of the DOM element
  With this method we can assign only ONE function to each event This method works the same in ALL the browsers

• We can also capture events with the advanced model

  With this method we can assign several functions to the same event
  To link/unlink a function to an event with this model we can use:

###addEventListener y removeEventListener

We pass 2 parameters:

1. Event type : click, change,...
2. Function to execute (handler, callback) : Receive an object e with info about the event
   • In e.target we have the element that triggered the event

The support of addEventListener is pretty extended among the the most popular browsers so its direct use is recommended.

Stopping the flow of the events

• Some elements has a default behaviour (for example when we click on a link the page loads its URL).
  This default action is executed at the end of the queue (if we have other functions assigned to the event)
  To deactivate the default action we can use the method e.preventDefault()

• We can stop the event propagation with the method e.stopPropagation()

• When the function assigned to the event returns false the methods e.preventDefault() & e.stopPropagation() are automatically applied

Events delegation

_{http://blogs.sitepoint.com/javascript-event-delegation-is-easier-than-you-think/
http://lab.distilldesign.com/event-delegation/}

• By taking advantage of the event propagation and the detection of the target_ we can optimize (in some cases) our events management with the event s delegation

• For the case we have to capture the events of lots of elements (for example the clicks of the cells in a table), we can capture the event of the container (the table) and detect which one of its children (which cell) triggered the event,

• Main advantages of this system are:

  • Much less events definitions: less memory space and better performance
  • No need of re-capturing events for the elements dinamically added

jQuery events

_{http://api.jquery.com/category/events/
http://jqfundamentals.com/book/index.html#chapter-5}

• With jQuery we can do our events management without being worried about the differences between browsers:

  • $().on() y $().off(): The cross-browsing addEventListener/removeEventListener

      .on( events [, selector ] [, data ], handler )
      .off( events [, selector ] [, handler ] )
    

    • The handler receives an object event exclusive of jQuery
    • The event types we can capture are blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error
    • We can also create our own event type

  • $().trigger(): Allow us to execute all handlers associated to an event

      .trigger( eventType, extraParameters )
    

  • $().toggle(): Attach several functions to an element that will be executed in several clicks

      .toggle( handler(eventObject), handler(eventObject), [ handler(eventObject) ] )
    

  • event.preventDefault(): The cross-browsing e.preventDefault

  • event.stopPropagation(): The cross-browsing e.stopPropagation

  • event.stopImmediatePropagation(): Besides doing cross-browsing e.stopPropagation, it stops the rest of handlers associated to the same event

  • event.target: The cross-browsing e.target (element that triggered the event)

  • event.type: The type of event launched