jQuery Events

An event is an action that may be handled by the software. Computer events can be generated or triggered by the system or by the user. Typically, events are handled synchronously with the program flow. Common jQuery events include, mouse events, keyboard events, hardware device such as a timer.

jQuery Mouse Events

Event	Decription
hover	The hover() is the combination of mouseenter() and mouseleave() event.
click	The click() event is triggered when the user click a mouse button over an HTML element.
mouseover	The mouseover() event is triggered when the mouse enter over an HTML element.
mouseout	The mouseout() event is triggered when the mouse leaves away from an HTML element.
mousedown	The mousedown() event is triggered when the mouse button is pressed over the selected element. It is same as click() event.
mouseup	The mouseup() event is triggered when the mouse button is released over the selected element.
mouseenter	The mouseenter event is triggered when the mouse pointer is entered onto an element.
mouseleave	The onmouseleave event occurs when the mouse pointer is moved out of an element.
onmousemove	When the user moves the mouse over an HTML element. DOM Ver 2

jQuery mouse hover() event

Example 1: jQuery hover() event

$(document).ready(function () {
  $("#p1").hover(function () {
    $(this).css("background","#faa"); //run on mouse over
  },
  function () {
    $(this).css("background","#ffa"); //run on mouse out
  });
});

jQuery mouse click() event

Example 2: Click on any heading to change its color using jQuery click() event.

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

jQuery mouseover(), mouseout() event

Example 3: jQuery mouseover(), mouseout event

$(document).ready(function(e) {
  $("div:nth-child(2)").mouseover(function(){
    $("body").css("background","red");	
  })
  $("div:nth-child(2)").mouseout(function(){
    $("body").css("background","white");	
  })
});

Example 4: jQuery mouseover(), mouseout event

$(document).ready(function(e) {
  $("p").mouseover(function(){
    $(this).text("Welcome, user");	
  })
  $("p").mouseout(function(){
    $(this).text("Hello, Hover Me");	
  })
});

Example 5: jQuery mouseover(), mouseout event

$(document).ready(function(e) {
  $("div:nth-child(2)").mouseover(function(){
    $("body").css("background","red");	
  })
  $("div:nth-child(2)").mouseout(function(){
    $("body").css("background","white");	
  })
});

jQuery mouseup() event

$("h1").mouseup(function() { ... });

jQuery mouseenter() Event

$("h1").mouseenter(function() { ... });

jQuery mouseleave() event

The mouseleave event is triggered when the mouse pointer leaves the selected element.

$("h1").mouseleave(function() { ... });

jQuery focus() and blur() event

The focus() event is triggered when the mouse pointer is entered in a input box. The blur() event is triggered when the mouse pointer is leave from a input box.

Attach multiple events

You can also combine multiple events in single HTML element. In the below example, when the user enter the mouse on paragraph, color changed to lightgray, when user leave the mouse, color became lightblue, and when user click on the paragraph color changed to yellow.

$(document).ready(function() {
  $("p").on({
    mouseenter: function() {
      $(this).css("background-color", "lightgray");
    },
    mouseleave: function() {
      $(this).css("background-color", "lightblue");
    },
    click: function() {
      $(this).css("background-color", "yellow");
    }
  });
});

jQuery unbind() event

The unbind method removes the specified event. The event will not be repeated. All events for the currently triggered event will be removed.

$(this).unbind(); 

$("*").unbind(); 

$("*").unbind("mouseleave"); 
//All mouseleave events will be removed. Mouseleave event will not be repeated.

Example: jQuery mouseenter(), mouseleave(), unbind() Event

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