Event dispatch and DOM event flow

DOM Level 3 Events Event Flow

DOM Level 3 Events Event Flow

DOM Events

Legacy mode (DOM Level 0) DOM Level 2
Event Type onclick click
Event Listener on HTML element attribute
<button onclick=”run”>run</button>
or  object property
run.onclick = function(e){};
register by calling addEventListener(“click”,function(e){},false)The 3rd argument, useCapture (false in the example above) determines to direct the event flow from parent to child or to bubble up from child to parent. Refer to the example.
this pointer event handler becomes a method of that document element lack of standardization. All known implementations invoke handlers registered with addEventListener() as if they were methods of that object.
Event Disposition <a href=”#” onclick=”return false;”>click me</a>  preventDefault();
Event Propagation  function (e) { e.cancelBubble = true; }   function (e) { e.stopPropagation(); }
  1. HTML DOM Events
  2. DOM Event Architecture
  3. jQuery: Event Object
Advertisements

Tagged: , ,

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: