jQuery Events, Easy To Learn jQuery Events

jQuery Events

jQuery events are used to create dynamic web pages. The events are actions that can be detected by your web application.

jQuery enhances the basic event-handling mechanisms by offering the event methods for most native browser events, some of these methods are click(), mouseenter(), keypress(), load(), focus(), blur(), change(), hover() etc.

jQuery Event Methods :

The jQuery library provides methods to handle DOM events. Most jQuery methods correspond to native DOM events.

The following table lists all jQuery methods and corresponding DOM events.

Category	jQuery Method	DOM Event
Mouse events	click()	onclick
	dblclick()	ondblclick
	hover()
	mouseup()	onmouseup
	mousedown()	onmousedown
	mouseenter()	onmouseenter
	mouseleave()	onmouseleave
	mouseover()	onmouseover
	mouseout()	onmouseout
Form events	blur()	onblur
	focus()	onfocus
	change()	onchange
	select()	onselect
	submit()	onsubmit
Keyboard events	keypress()	onkeypress
	keyup()	onkeyup
	keydown()	onkeydown
Document loading	Load()	onload
	Unload()	onunload

jQuery Event Methods Examples :

$(document).ready()

The $(document).ready() method allows us to execute a function when the document is fully loaded.

click()

The click() method attaches an event handler function to an HTML element.

When a click event fires on a <p> element; hide the current <p> element :

<!DOCTYPE html>
<html>
<head>
<title>jQuery click()</title>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("p").click(function(){
        $(this).hide();
    });
});
</script>
</head>
<body>
 
<a href="#"><p>Click here to sample paragraph 1</p></a>
<a href="#"><p>Click here to sample paragraph 2</p></a>
<a href="#"><p>Click here to sample paragraph 3</p></a>
 
</body>
</html>

Output :

dbclick()

The jQuery dblclick() method attach an event handler function to the selected elements for "dblclick" event. The attached function is executed when the user double-clicks on that element. The following example will hide the <p> elements when they are double-clicked.

	
<!DOCTYPE html>
<html>
<head>
<title>jQuery dbclick()</title>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("p").dblclick(function(){
        $(this).hide();
    });
});
</script>
</head>
<body>
 
<a href="#"><p>Click here to sample paragraph 1</p></a>
<a href="#"><p>Click here to sample paragraph 2</p></a>
<a href="#"><p>Click here to sample paragraph 3</p></a>
 
</body>
</html>

Output :

hover()

The jQuery hover() method attach one or two event handler functions to the selected elements that is executed when the mouse pointer enters and leaves the elements.

<!DOCTYPE html>
<html>
<head>
<title>jQuery hover()</title>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("#p1").hover(function(){
        alert("Hi welcome to Free Time Learning!");
    },
    function(){
        alert("www.freetimelearning.com!");
    }); 
});
</script>
</head>
<body>
 
<h4 id="p1">This is hover() jQuery.</h4>
 
</body>
</html>

Output :

mouseup()

The jQuery mouseup() method attaches an event handler function to an selected elements.

The function is executed, when the left, middle or right mouse button is released, while the mouse is over the mouseup() element :

	
<!DOCTYPE html>
<html>
<head>
<title>jQuery mouseup()</title>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("#mouse_up").mouseup(function(){
        alert("Hi. this is a Mouse Up!");
    });
});
</script>
</head>
<body>
 
<h4 id="mouse_up">This is a mouseup() jQuery.</h4>
 
</body>
</html>

Output :

mousedown()

The jQuery mousedown() method attaches an event handler function to an selected elements.

The function is executed, when the left, middle or right mouse button is pressed down, while the mouse is over the mousedown() element.

<!DOCTYPE html>
<html>
<head>
<title>jQuery mousedown()</title>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("#p1").mousedown(function(){
        alert("welcome to www.freetimelearning.com");
    });
});
</script>
</head>
<body>
 
<h4 id="p1">This is a mousedown() jQuery.</h4>
 
</body>
</html>

Output :

mouseenter()

The jQuery mouseenter() method attach an event handler function to the selected elements that is executed when the mouse enters an element.

	
<!DOCTYPE html>
<html>
<head>
<title>jQuery mouseenter()</title>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("#mouse_enter").mouseenter(function(){
        alert("Hi This is Mouse Enter!");
    });
});
</script>
</head>

<body>

  <h4 id="mouse_enter">This is a mouseenter() jQuery.</h4>

</body>
</html>

Output :

mouseleave()

The jQuery mouseleave() method attach an event handler function to the selected elements that is executed when the mouse leaves an element.

<!DOCTYPE html>
<html>
<head>
<title>jQuery mouseleave()</title>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("#mouse_leave").mouseleave(function(){
        alert("Hi! This is Mouse Leave!");
    });
});
</script>
</head>
<body>
 
<h4 id="mouse_leave">This is a mouseleave() jQuery.</h4>
 
</body>
</html>

Output :

mouseover() and mouseout()

The mouseover() event is occurred when you put your mouse cursor over the selected element .Once the mouseover event is occurred, it executes the mouseover () method or attach a function to run.

This event is generally used with mouseout() event.

<!DOCTYPE html>
<html>
<head>
<title>jQuery mouseover()</title>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){  
    $("h4").mouseover(function(){  
        $("h4").css("background-color", "#0099da");  
    });  
    $("h4").mouseout(function(){  
        $("h4").css("background-color", "orange");  
      });  
});  
</script>
</head>
<body>
 
<h4>This is a mouseover() jQuery.</h4>
 
</body>
</html>

Output :

focus() and blur()

The jQuery focus() method attach an event handler function to the selected elements (typically form controls and links) that is executed when it gains focus.

The jQuery blur() method attach an event handler function to the form elements such as <input>, <textarea>, <select> that is executed when it loses focus.

<!DOCTYPE html>
<html>
<head>
<title>jQuery focus() and blur()</title>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("input").focus(function(){
        $(this).css("background-color", "#CCC");
    });
    $("input").blur(function(){
        $(this).css("background-color", "#F8F8F8");
    });
});
</script>
</head>
<body>
 
First Name : <input type="text" name="firstName"><br /><br />
Last Name : <input type="text" name="lastName">
 
</body>
</html>

Output :

change()

The jQuery change() method attach an event handler function to the <input>, <textarea> and <select> elements that is executed when its value changes.

<!DOCTYPE html>
<html>
<head>
<title>jQuery change()</title>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<style type="text/css">    
  div{ color:red; }    
</style> 
</head>
<body>
 
<select id="select_one" name="books" >    
  <option>HTML</option>    
  <option>CSS</option>    
  <option>CSS3</option>    
  <option>Javascript</option>      
  <option selected="selected">jQuery</option>    
</select>    
<div id="change_book"></div> 
   
<script type="text/javascript">
  $( "select" ) .change(function () {    
  document.getElementById("change_book").innerHTML="You selected : 
  "+document.getElementById("select_one").value;  
  });  
</script>
 </body>    
</html>

Output :

select()

This event is limited to <input type="text"> fields and <textarea> boxes. When the select() event occurs, the select() method attaches a function to run.

<!DOCTYPE html>
<html>
<head>
<title>jQuery select()</title>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<style type="text/css">   
p{
color:#F60; 
padding:7px 0px; 
font-size:16px; 
font-weight:bold; 
font-style:italic; 
} 
div{
color:#0099da; 
padding:7px 0px; 
font-size:18px; 
font-weight:bold;
font-style:italic; 
}    
</style> 
</head>
<body>
 
  <p>Select the text on the box : click and drag the mouse to select text.</p>  
  <input type="text" value="www.freetimelearning.com">  
  <input type="text" value="freetimelearn.com">  
  <div></div>   
  
<script type="text/javascript">
$( ":input" ).select(function() {  
  $( "div" ).text( "Some text was selected" ).show().fadeOut( 3000 );  
});    
</script>
 </body>  
</html>

Output :

submit()

The jQuery submit() method attach an event handler function to the <form> elements that is executed when the user is attempting to submit a form.

<!DOCTYPE html>
<html>
<head>
<title>jQuery submit()</title>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<style type="text/css">   
p{
color:#0099da; 
padding:7px 0px; 
font-size:16px; font-weight:bold; 
font-style:italic; 
} 
span{
color:#F60; 
padding:7px 0px; 
font-size:18px; 
font-weight:bold; 
font-style:italic; 
}    
</style> 
</head>
<body>
 
<p>Type 'www.freetimelearning.com' to submit this form finally.</p>  
<form action="javascript:alert( 'Successfully Submited!' );">  
  <div>  
    <input type="text" placeholder="www.freetimelearning.com">  
    <input type="submit">  
  </div>  
</form>  
<span></span>  
<script>  
$( "form" ).submit(function( event ) {  
  if ( $( "input:first" ).val() === "www.freetimelearning.com" ) {  
    $( "span" ).text( "Successfully Submitted." ).show();  
    return;  
  }  
  $( "span" ).text( "Not valid!" ).show().fadeOut( 3000 );  
  event.preventDefault();  
});  
</script>  
</body>  
</html>

Output :

keypress()

The jQuery keypress () event is occurred when a keyboard button is pressed down. This event is similar to keydown() event. The keypress() method is executed or attach a function to run when a keypress() event occurs.

<!DOCTYPE html>
<html>
<head>
<title>jQuery keypress()</title>
<script type="text/javascript" src="s/jquery-3.2.1.min.js"></script>
<style type="text/css">   
p{
color:#0099da; 
padding:7px 0px; 
font-size:16px; 
font-weight:bold; 
font-style:italic; 
} 
span{
color:#F60; 
padding:7px 0px; 
font-size:18px; 
font-weight:bold; 
font-style:italic; 
}    
</style> 
</head>
<body>
<p>Write something: <input type="text">  </p>
<p>Keypresses: <span>0</span></p>  
<script type="text/javascript">  
 i= 0;  
$(document).ready(function(){  
    $("input").keypress(function(){  
        $("span").text (i += 1);  
    });  
});  
</script>  
</body>  
</html>

Output :

keyup() and keydown()

The jQuery keyup() event occurs when a keyboard button is released after pressing. This method is executed or attach a function to run when a keyup() event occurs.

The jQuery keydown() event is occurred and once the keydown() event is occurred, it executes the function associated with keydown() method to run.

The following example to jQuery keyup() and keydown() event.

<!DOCTYPE html>
<html>
<head>
<title>jQuery keyup() and keydown()</title>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">  
$(document).ready(function(){   
    $("input").keyup(function(){  
        $("input").css("background-color", "#FF0");  
    }); 
$("input").keydown(function(){  
        $("input").css("background-color", "#F60");  
    }); 
});  
</script>  
<style type="text/css">   
p{
color:#0099da; 
padding:7px 0px; 
font-size:16px; 
font-weight:bold; 
font-style:italic; 
}  
</style> 
</head>  
<body>  
 
<p> Write something: <input type="text"> </p>
 
</body>  
</html>

Output :

load()

The jQuery load () method is used to load a specific element. It is an essential parameter. It executes itself when the specified element is done loading.

Let's take an example to demonstrate jQuery load() event.

<!DOCTYPE html>
<html>
<head>
<title>jQuery load()</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>  
<script>  
$(document).ready(function(){  
    $("img").load(function(){  
        alert("Image loaded.");  
    });  
});  
</script>  
</head>  
<body>  
<img src="../html5/images/figure-tag.jpg" alt="sampleimage">  
</body>  
</html>

Output :

unload()

The jQuery unload() method is used to unload a specific element.It is an essential parameter. It executes itself when the unload event is triggered.

Let's take an example to demonstrate jQuery unload() event.

<!DOCTYPE html>
<html>
<head>
<title>jQuery unload()</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>  
<script type="text/javascript">  
$(document).ready(function(){  
    $(window).unload(function(){  
        alert("Goodbye!");  
    });  
});  
</script>  
</head>  
<body>  
<p>This is the free educational website. 
  <a href="http://www.freetimelearn.com/">www.freetimelearning.com</a>
</p>  
</body>  
</html>

Output :

jQuery Tutorial