Event dispatch and DOM event flow by Wentz Wu, ISSAP, ISSEP, ISSMP CISSP, CCSP, CSSLP, CGRC, SSCP, CC, CISM, CISA, CRISC, CGEIT, PMP, ACP, PBA, RMP, CEH, ECSAWentz Wu

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(); }
HTML DOM Events DOM Event Architecture jQuery: Event Object

Wentz Wu