jQuery - Events Handling

Browse more Jquery Examples
<!DOCTYPE html>
<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $('div').bind('click', function( event ){
                var content 
                content = 'Event type : ' + event.type;
                content = content + "<br>" + 'pageX : ' + event.pageX
                content = content + "<br>" + 'pageY : ' + event.pageY
                content = content + "<br>" + 'Target.innerHTML : ' + event.target.innerHTML;
                content = content + "<br>" + 'Target.nodeName  : ' + event.target.nodeName ;
                content = content + "<br>" + 'currentTarget.nodeName : ' + event.currentTarget.nodeName;
                content = content + "<br>" + 'delegateTarget.nodeName : ' + event.delegateTarget.nodeName;
                content = content + "<br>" + 'isDefaultPrevented :' + event.isDefaultPrevented();
                content = content + "<br>" + 'namespace : ' + event.namespace
                content = content + "<br>" + 'result : ' + event.result
                content = content + "<br>" + 'timeStamp : ' + event.timeStamp;
                content = content + "<br>" + 'which : ' + event.which;
                //$('#span-1').text(content);
                $('#span-1').html(content);
            });
         });
      </script>
		
      <style>
         .div{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
      </style>
   </head>
	
   <body>
        <p>* Click on any square below to see the result</p>
	    <span id="span-1"></span>	
        <div class = "div" style = "background-color:blue;">ONE</div>
        <div class = "div" style = "background-color:green;">TWO</div>
        <div class = "div" style = "background-color:red;">THREE</div>
   </body>
</html>
jQuery - Events Handling

Follow

Newsletter
