Establishing event handlers with the DOM Level 2 Model : Event « jQuery « JavaScript Tutorial

<html>
  <head>
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){

$(function(){
    var element = $('#my')[0];
    element.addEventListener('click',function(event) {
        say('once!');
    },false);
    element.addEventListener('click',function(event) {
        say('twice!');
    },false);
    element.addEventListener('click',function(event) {
        say('three times!');
    },false);
});
function say(text) {
$('#console').append('<div>'+text+'</div>');
}
        });
    </script>
<style>

  div { margin:3px; width:50px; position:absolute;
        height:50px; left:10px; top:30px; 
        background-color:yellow; }
  div.red { background-color:red; }
  
</style>
  </head>
  <body>
    <body>
      <img id="my" src="my.jpg"/>
<div id="console"></div>
    </body>
</html>

30.131.Event
	30.131.1.	Cancel only the default action by using the preventDefault method
	30.131.2.	Get click event coordinates
	30.131.3.	Get event target
	30.131.4.	Cancel a default action and prevent it from bubbling up
	30.131.5.	Get tag name from event target
	30.131.6.	Prevent default event
	30.131.7.	Removes a bound live event
	30.131.8.	Event instance properties
	30.131.9.	Define custom event
	30.131.10.	Stop only an event from bubbling by using the stopPropagation method.
	30.131.11.	Pass some extra data before the event handler:
	30.131.12.	To cancel only the default action by using the preventDefault method.
	30.131.13.	Establishing event handlers with the DOM Level 2 Model
	30.131.14.	Tracking event propagation with bubble and capture handlers
	30.131.15.	Dynamically tracking the dimensions of an element