home

Jquery Events Introduction

You can use events to specified to happens certain things, for example, user might click on the particular element and action will be happened to certain criteria, I have given example html code below, the paragraph has 4 heading tags (h1 tags), background-color should be changed red to blue when the user over on the h1 tags.

Jquery Mouse Event demo

this my first paragraph in the html
this my first paragraph in the html
this my first paragraph in the html

Jquery Mouse Event html code

<h1 title="this my first paragraph in the html">this my first paragraph in the html</h1>
<h1 title="this my first paragraph in the html">this my first paragraph in the html</h1>
<h1 title="this my first paragraph in the html">this my first paragraph in the html</h1>
<h1 title="this my first paragraph in the html">this my first paragraph in the html</h1>

Jquery Mouse Event code

Here h1 tag is event (mouse enter event) when the user mouse over the heading tag (h1) event will be run inside the function, so I so we specify what we do change in next line background color will be changed to blue color with white text again mouse out from the text again second event will run (mouse leave) then I will come back to normal.

$(document).ready(function() {
  $("h1").mouseenter(function(){
      $("h1").css("background-color","#03F");
      $("h1").css("color","#FFF");
	  
  $("h1").mouseleave(function() {
      $("h1").css("background-color","#fff");
      $("h1").css("color","#000");
   });
  })
});

Jquery Events Handle/Bind

Handling Events can be a little tricky thing and most important thing in the jquery index list, there were many events also every individual event has their own action. Jquery provides a method .click () to give an action (respond) to any event on the selected elements.

Jquery Click Event

Here we have simple click event example, when you click on the div tag it will through an alert box with a text of "this is a HTML div element".

$(document).ready(function(){
$("div").click(function(){
alert("This is html div element");
});
});

Jquery events list

Event Names
Description
bind() Attaches event handlers to elements
blur() Attaches/Triggers the blur event
change() Attaches/Triggers the change event
click() Attaches/Triggers the click event
dblclick() Attaches/Triggers the double click event
event.currentTarget The current DOM element within the event bubbling phase
event.data Contains the optional data passed to an event method when the current executing handler is bound
event.namespace Returns the namespace specified when the event was triggered
event.pageX Returns the mouse position relative to the left edge of the document
event.pageY Returns the mouse position relative to the top edge of the document
event.target Returns which DOM element triggered the event
event.type Returns which event type was triggered
event.which Returns which keyboard key or mouse button was pressed for the event
focus() Attaches/Triggers the focus event
focusin() Attaches an event handler to the focusin event
focusout() Attaches an event handler to the focusout event
hover() Attaches two event handlers to the hover event
keydown() Attaches/Triggers the keydown event
keypress() Attaches/Triggers the keypress event
keyup() Attaches/Triggers the keyup event
live() Removed in version 1.9. Adds one or more event handlers to current, or future, selected elements
load() Attaches an event handler to the load event
mousedown() Attaches/Triggers the mousedown event
mouseenter() Attaches/Triggers the mouseenter event
mouseleave() Attaches/Triggers the mouseleave event
mousemove() Attaches/Triggers the mousemove event
mouseout() Attaches/Triggers the mouseout event
mouseover() Attaches/Triggers the mouseover event
mouseup() Attaches/Triggers the mouseup event
off() Removes event handlers attached with the on() method
on() Attaches event handlers to elements
one() Adds one or more event handlers to selected elements. This handler can only be triggered once per element
$.proxy() Takes an existing function and returns a new one with a particular context
ready() Specifies a function to execute when the DOM is fully loaded
resize() Attaches/Triggers the resize event
scroll() Attaches/Triggers the scroll event
select() Attaches/Triggers the select event
submit() Attaches/Triggers the submit event
toggle() Attaches two or more functions to toggle between for the click event
trigger() Triggers all events bound to the selected elements
triggerHandler() Triggers all functions bound to a specified event for the selected elements
unbind() Removes an added event handler from selected elements
undelegate() Removes an event handler to selected elements, now or in the future
unload() Attaches an event handler to the unload event