12.3 JavaScript: jQuery Events

When you click on text or logo or when you move your mouse on webpage, jQuery can help you to do lots of fun stuff.
Create a new html file and copy following text in it.

<!DOCTYPE html>
<html lang="en">
	<head id=>
		<meta charset="utf-8" />
		<title>Understand Programming</title>
	</head>

	<body>
		<link rel="stylesheet" type="text/css" href="style.css" />
    	<center>
      		<img SRC="http://www.understand-programming.com/wp-content/uploads/2015/06/logo_main_.jpg" id="logo" >
      		<font color="#009cde"> <H1>Understand JavaScript</H1> </font>
      		<H2 id="heading">JQuery Events</H2>
      </center>

    	<center>
     		    <div id="main">
		        <p id="p1"> <H3>Click on Logo and Your Score is</H3> </p>
		        <p id="score"> 0 </p>
		        <p id="message"> You have clicked on Logo </p>
		    </div>
    	</center>

      <center>
          <p> <H3>Click inside and outside text box</H3> </p>
          <input id="focus" type="text">
          <p id="focuscount"> focus out </div>
      </center>

    <center>
      	<h4>
        	Copyright © by <a HREF="http://understand-programming.com">Understand-Programming</a>
      	</h4>
    </center>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script>
    <script type="text/javascript" src="jquery_events.js"></script>

  </body>
</html>


Click event and hide event

Let say you want to click on logo and you want to count your clicks. Create a new file jquery_events.js and add necessary body as mentioned bellow. Make sure you have also included this jquery_events.js in your html file.

$(document).ready(function(){
// your code here
});

Create a local variable called score and assign value to 0. Use a jQuery function “hide()” on “message” tag in html. This function will hide “message” tag.

$(document).ready(function(){
   var score = 0;
   $('#message').hide();
});

Now add a function, when user will click on logo, score will increment by one and message will appear for a second and fade out. See how all these things will implement in few lines of code with magic of jQuery.

Implement “click” function on logo. When user will click on logo, following function will trigger.
$(‘#logo’).click ( /*code here */ );

Add a function which increment in score and “You have clicked on logo” will appear for a second and fade out again.

function(){
score++;
$(‘#score’).text(score);
$(‘#message’).show(‘slow’).fadeOut(1000);
}

Final picture will be like this. Add these lines in jquery_events.js file and execute html file in browser. Click on logo and you will see the score will increment and message will appear and fade out

$(document).ready(function(){
   var score = 0;
   $('#message').hide();

   $('#logo').click( function(){
      score++;
      $('#score').text(score);
      $('#message').show('slow').fadeOut(1000);
  });
});


Hover over event

jQuery provides a function where you can do some fun while moving your mouse on specific text. For example you can change the color of any text when user hover over the mouse.

Create a css file called style.css and add following code and save it. As always do not forget to include this file in your html.

.hoverout { 
    color:blue; 
    font-size: 20pt; 
}

.hoverover {
    color:red;
    font-size: 20pt;
}

 

Select a text from html.

<H2 id="heading">JQuery Events</H2>

Implement one css style on selected text to change the color.

$('#heading').addClass('hoverout');

Implement the .hover event on this “heading” text. This .hover takes two functions as parameter.

$('#heading').hover(function(){/* code here */} , function(){ /* code here */})

In first parameter you can add “hoverover” css style on your text and remove “hoverout”. So when the user will bring mouse on this text, first parameter function will trigger. In second parameter you can remove “hoverover” css style and add “hoverout”. So when the user will take mouse away from the text, the second parameter will trigger.

“hoverout” and “hoverover” are css styles which you have already created in style.css.

$(document).ready(function(){

   $('#heading').hover(function(){
       $('#heading').addClass('hoverover').removeClass('hoverout');
   },function(){
       $('#heading').removeClass('hoverover').addClass('hoverout');
   });

});

Focus event

Implement a focus event on text box. When user will click in and outside the text box. jQuery .focusout() event will trigger. Select a text box from your html file and implement .focusout event.

<input id="focus" type="text">
$(document).ready(function(){

    var focus = 0;
    $("#focus").focusout(function(){
    focus++;
    $("#focuscount").text("focus out " + focus);
    });
});

These are very few examples from rich collections of jQuery. Visit official website of jQuery for more information

 

Download file from GitHub