***********************************************************************************

*****************************************
--> When an event happens, it flows from document to specific element first
(capturing phase) and then from specific element to document (bubbling phase).
Handler can be attached to any element in this path and for any phase.
addEventListener() takes a boolean (third parameter) to decide phase.
true ==> handler for capturing.
false ==> handler for bubbling.

EX:
If div1 contains div2 & div2 contains div3. All the three divs have click handler
for capturing phase & bubbling phase. When user clicks on div3, handler order:
div1 (capturing phase)
div2 (capturing phase)
div3 (capturing phase)
div3 (bubbling phase)
div2 (bubbling phase)
div1 (bubbling phase)

This order is not gaureenteed:

http://stackoverflow.com/questions/11841330/event-order-capturing-bubbling

Inline & traditional registration are treated as bubbling.

<div onclick="doSomething();"> // inline
ele.onlick = doSomething; // traditional. onclick property can contain only one
function. But addEventListener or attachEvent can have multiple handlers.
ele.addEventListener('click', doSomething, false); // w3c model. "this" refers html
element handling that event.
element.attachEvent('onclick', doSomething); // Microsoft model. "this" always
refers to window.

The main practical use of capturing and bubbling is the registration of default
handler.
document.onclick = doSomething;
jQuery live() works by attching handler to document and handles event in bubbling
phase.

Difference between attachEvent & addEventListener:

Microsoft model (attachEvent) has two important drawbacks:
1) Events always bubble, no capturing possibility.
2) The event handling function is referenced, not copied, so the "this" keyword
always refers to the window.

***********************************************************************************
*****************************************
Why turn off bubbling?
The browser has to go through every single ancestor element of the event target to
see if it has an event handler.
Even if none are found, the search still takes time.

How to turn off event bubbling?

If you handle event, prevent its further flow using using following methods:
event.stopPropagation(); // Non IE
event.cancelBubble = true; // IE

If event is not passed to handler function in IE, use window.event.

event = event || window.event;

***********************************************************************************
*****************************************
event.type says whether event is click, keydown, keyup, keypress, change, focus or
blur.

event.target (non IE) or event.srcElement (IE) returns the element the event took
place on. This target or srcElement never changes during capturing or bubbling
phase. currentTarget property contains a reference to the HTML element the event is
currently being handled by:

In Safari, if event happens on element with text, event.target refers text node. To
get actual element, use following code:
var tgt = event.target;
if (targ.nodeType == 3) { targ = targ.parentNode; }

var currentTarget = (event.currentTarget ? event.currentTarget : event.srcElement);

currentTarget is not supported in IE. Use srcElement instead.

***********************************************************************************
*****************************************
event.button says which mouse button is clicked:
Left button ==> 0
Middle button ==> 1
Right button ==> 2

event.keyCode says which key is pressed.

***********************************************************************************
*****************************************
Certain elements have default actions for click event. For example, anchor's click
action opens link given in href. form's submit button click sends data to server.
What if these alements also have click handlers? What is order of action?
a) the event handler script is executed first.
b) the default action takes place afterwards.

What if click handler is enough and default action is not needed? Use following
ways:
return false; // traditional
event.preventDefault(); // w3c model
event.returnValue = false; // IE model.

***********************************************************************************
***************************************
How to get event & element in onclick handler?

<div onclick="ff(event, this)"></div>

function ff(event, ele)

{}

***********************************************************************************
***************************************
DOMSubtreeModified event fires on a node when a modification occurs in the subtree
that belongs to it.
ele.addEventListener("DOMSubtreeModified", handler, true);

***********************************************************************************
*****************************************
How to add functions to handle mouseout & mouseover?
function submitMouseOut {}

submitBtn.onmouseout = submitMouseOut;
submitBtn.onmouseover = submitMouseOver;

or

<img src="" onmouseout="submitMouseOut()" onmouseover="submitMouseOver()"/>

Note:
DOM's mouseover & mouseout will be called multiple times. Do not use them. Instead,
use jQuery's mouseenter & mouseleave which are called only once.

***********************************************************************************
*****************************************
How to get event object along with i/p parameters in an event handler?

function createDelegate(fn, scope, args)

{
var fnDelegate = function()
{
// use fn.apply, not fn.call cos args is an array. fn.call does not unroll
the array into multiple arguments, but fn.apply does
//
http://blog.metawrap.com/blog/TheVeryUsefulJavaScriptCallAndApplyFunctionsForOverri
dingThisForAGivenFunction.aspx
//http://odetocode.com/blogs/scott/archive/2007/07/05/function-apply-and-
function-call-in-javascript.aspx
fn.apply(scope, (args ?
args.concat(Array.prototype.slice.call(arguments)) : arguments));
};

return fnDelegate;
}

***********************************************************************************
*****************************************
How to use createDelegate for global or local functions?

function f()
{
var g = function(i, j)
{
};

createDelegate(g, null, [1, 2]);

}

***********************************************************************************
*****************************************
Safari event handling:
http://developer.apple.com/library/safari/#documentation/appleapplications/referenc
e/safariwebcontent/HandlingEvents/HandlingEvents.html

Touch events provided by Apple:

http://developer.apple.com/library/safari/#documentation/appleapplications/referenc
e/safariwebcontent/HandlingEvents/HandlingEvents.html#//apple_ref/doc/uid/TP4000651
1-SW5
Additional events added by Apple:
http://developer.apple.com/library/safari/#documentation/appleapplications/referenc
e/SafariJSRef/_index.html#//apple_ref/doc/uid/TP40001482

jQuery mobile events:

http://jquerymobile.com/demos/1.0a4.1/#docs/api/events.html

***********************************************************************************
*****************************************
gestureevent is for 2 or more fingers.
http://developer.apple.com/library/safari/#documentation/UserExperience/Reference/G
estureEventClassReference/GestureEvent/GestureEvent.html#//apple_ref/doc/uid/TP4000
9353

***********************************************************************************
*****************************************
How to get mouse position in an event handler?
(function() {
window.onmousemove = handleMouseMove;
function handleMouseMove(event) {
event = event || window.event; // IE-ism
// event.clientX and event.clientY contain the mouse position
}
})();

***********************************************************************************
*****************************************
document.activeElement property has the element which has focus.

***********************************************************************************
*****************************************
window.onscroll specifies the function to be called when the window is scrolled.
EX:
window.onscroll = function (oEvent) {};

window.onresize specifies the function to be called when the window is resized.

***********************************************************************************
*****************************************
How to disable right click or browser context menu on an element?
How to show custom menu on right click?

$("#ele").mousedown(onMouseDown);
$(document).bind("contextmenu",function(e){
console.log('Context Menu event has fired. But browser context menu will not be
shown');
e.preventDefault();
return false;
});

Note:
Adding contextmenu on individual elements don't work.

***********************************************************************************
*****************************************
Special keys:
IE doesn't fire the keypress event for delete, end, enter, escape, function keys,
home, insert, pageUp/Down and tab
To detect these keys, search for their keyCode onkeydown/up, and ignore both
onkeypress and charCode.
http://www.quirksmode.org/js/keys.html

***********************************************************************************
*****************************************
How to register handler for custom or app specific event and trigger it? Bind
custom event handler to document and also listen from document. EX:
$(document).bind('custom.event', function(){ console.log("Received
custom.event"); });
$(document).trigger('custom.event');

***********************************************************************************
*****************************************