JavaScript & jQuery Video Tutorial

Part 3 - jQuery Events

The following code is from the Video.

HTML Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>
 <title>Demo</title>
 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>

<body>
 <h1>Heading one</h1>
 <h1>Heading two</h1>
 <h1>Heading three</h1>

<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="my_code.js"></script>
</body>

</html>

click() Event

The click event is triggered when the mouse button is pressed and released while over the selected element. Example: $("h1").click(). Press and release the mouse button while over an <h1> element to trigger the event.

$(document).ready(function() {
						   
  $("h1").click(function() {
    $(this).css("background-color","red");
  });
  
});

Try it out.

mousedown() Event

The mousedown event is triggered when the mouse button is pressed while over the selected element. Example: $("h1").mousedown(). Press the mouse button while over an <h1> element to trigger the event.

$(document).ready(function() {
						   
  $("h1").mousedown(function() {
    $(this).css("background-color","red");
  });
  
});

Try it out.

mousedown() and mouseup() Events

The mouseup event is triggered when the mouse button is released while over the selected element. Example: $("h1").mouseup(). Release the mouse button while over an <h1> element to trigger the event.

$(document).ready(function() {
						   
  $("h1").mousedown(function() {
    $(this).css("background-color","red");
  });
  $("h1").mouseup(function() {
    $(this).css("background-color","yellow");
  });
  
});

Try it out.

mouseenter() and mouseleave() Events

The mouseenter event is triggered when the mouse cursor enters the selected element. Example: $("h1").mouseenter(). Move the mouse cursor over an <h1> element to trigger the event.

The mouseleave event is triggered when the mouse cursor leaves the selected element. Example: $("h1").mouseleave(). Move the mouse cursor off of an <h1> element to trigger the event.

$(document).ready(function() {
						   
  $("h1").mouseenter(function() {
    $(this).css("background-color","red");
  });
  $("h1").mouseleave(function() {
    $(this).css("background-color","yellow");
  });
  
});

Try it out.

unbind() Method - Sample 1

The unbind method removes the specified event. Example: $(this).unbind() - All events for the currently triggered event will be removed.

$(document).ready(function() {
						   
  $("h1").mouseenter(function() {
    $(this).css("background-color","red");
  });
  $("h1").mouseleave(function() {
    $(this).css("background-color","yellow");
    $(this).unbind();
  });
  
});

Try it out.

unbind() Method - Sample 2

The unbind method removes the specified event. Example: $("*").unbind() - All events will be removed.

$(document).ready(function() {
						   
  $("h1").mouseenter(function() {
    $(this).css("background-color","red");
  });
  $("h1").mouseleave(function() {
    $(this).css("background-color","yellow");
    $("*").unbind();
  });
  
});

Try it out.

unbind() Method - Sample 3

The unbind() method removes the specified event. Example: $("*").unbind("mouseleave") - All mouseleave events will be removed.

$(document).ready(function() {
						   
  $("h1").mouseenter(function() {
    $(this).css("background-color","red");
  });
  $("h1").mouseleave(function() {
    $(this).css("background-color","yellow");
    $("*").unbind("mouseleave");
  });
  
});