User Rating: 2 / 5

Star ActiveStar ActiveStar InactiveStar InactiveStar Inactive
 
What are Events?

All the different visitor's actions that a web page can respond to are called events.

An event represents the precise moment when something happens.

Examples:

  • moving a mouse over an element
  • selecting a radio button
  • clicking on an element

The term "fires" is often used with events. Example: "The keypress event fires the moment you press a key".

Here are some common DOM events:

Mouse Event Keyboard Event Form Event Document/Windows Event
click keypress submit load
dblclick keyup change resize
mouseenter keydown focus scroll
mouseleve   blur unload

 

jQuery Syntax For Event Methods

In jQuery, most DOM events have an equivalent jQuery method.

To assign a click event to all paragraphs on a page, you can do this:

$("p").click();

The next step is to define what should happen when the event fires. You must pass a function to the event:

$("p").click(function(){
// action goes here!!
});

Commonly Used jQuery Event Methods

$(document).ready()

The $(document).ready() method allows us to execute a function when the document is fully loaded. This event is already explained in the jQuery Syntax chapter.

click()

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

The function is executed when the user clicks on the HTML element.

The following example says: When a click event fires on a <p> element; hide the current <p> element:

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("p").click(function(){
    $(this).hide();
  });
});
</script>
</head>
<body>

<p>If you click on me, I will disappear.</p>
<p>Click me away!</p>
<p>Click me too!</p>

</body>
</html>

dblclick()

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

The function is executed when the user double-clicks on the HTML element:

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("p").dblclick(function(){
    $(this).hide();
  });
});
</script>
</head>
<body>
<p>If you double-click on me, I will disappear.</p>
<p>Click me away!</p>
<p>Click me too!</p>
</body>
</html>

mouseenter()

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

The function is executed when the mouse pointer enters the HTML element:

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#p1").mouseenter(function(){
    alert("You entered p1!");
  });
});
</script>
</head>
<body>
<p id="p1">Enter this paragraph.</p>
</body>
</html>

mouseleave()

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

The function is executed when the mouse pointer leaves the HTML element:

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#p1").mouseleave(function(){
    alert("Bye! You now leave p1!");
  });
});
</script>
</head>
<body>
<p id="p1">This is a paragraph.</p>
</body>
</html>

mousedown()

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

The function is executed, when the left mouse button is pressed down, while the mouse is over the HTML element:

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#p1").mousedown(function(){
    alert("Mouse down over p1!");
  });
});
</script>
</head>
<body>
<p id="p1">This is a paragraph.</p>
</body>
</html>

mouseup()

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

The function is executed, when the left mouse button is released, while the mouse is over the HTML element:

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#p1").mouseup(function(){
    alert("Mouse up over p1!");
  });
});
</script>
</head>
<body>
<p id="p1">This is a paragraph.</p>
</body>
</html>

hover()

The hover() method takes two functions and is a combination of the mouseenter() and mouseleave() methods.

The first function is executed when the mouse enters the HTML element, and the second function is executed when the mouse leaves the HTML element:

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#p1").hover(function(){
    alert("You entered p1!");
    },
    function(){
    alert("Bye! You now leave p1!");
  }); 
});
</script>
</head>
<body>
<p id="p1">This is a paragraph.</p>
</body>
</html>

focus()

The focus() method attaches an event handler function to an HTML form field.

The function is executed when the form field gets focus:

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("input").focus(function(){
    $(this).css("background-color","#cccccc");
  });
  $("input").blur(function(){
    $(this).css("background-color","#ffffff");
  });
});
</script>
</head>
<body>
Name: <input type="text" name="fullname"><br>
Email: <input type="text" name="email">
</body>
</html>

blur()

The blur() method attaches an event handler function to an HTML form field.

The function is executed when the form field loses focus:

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("input").focus(function(){
    $(this).css("background-color","#cccccc");
  });
  $("input").blur(function(){
    $(this).css("background-color","#ffffff");
  });
});
</script>
</head>
<body>
Name: <input type="text" name="fullname"><br>
Email: <input type="text" name="email">
</body>
</html>

 

Recent Topics
Subject
Post Reply
Open
Recent
The program calculates the PMT
By prmindphp Wed 20 May 2020 6:45 pm Board English Language
1
32
Thu 21 May 2020 5:57 pm By prmindphp
Helper for calculating NPER values
By prmindphp Tue 19 May 2020 6:55 pm Board English Language
1
29
Thu 21 May 2020 5:59 pm By prmindphp
Program that will be used for home loan calculations
By prmindphp Mon 18 May 2020 6:49 pm Board English Language
1
36
Thu 21 May 2020 6:02 pm By prmindphp
Tools that will help calculate car tax
By prmindphp Thu 14 May 2020 7:00 pm Board English Language
1
32
Fri 15 May 2020 12:03 am By prmindphp
Helper to create slidershow, Module Product Slide of MooZiiCart
By prmindphp Thu 30 Apr 2020 6:32 pm Board English Language
0
44
Thu 30 Apr 2020 6:32 pm By prmindphp
Helper in searching products by category and keywords with Module Ajax Search of MooZiiCart
By prmindphp Tue 28 Apr 2020 6:17 pm Board English Language
0
41
Tue 28 Apr 2020 6:17 pm By prmindphp
Helper to restore the system to clear data, Plugin System MRestore
By prmindphp Fri 24 Apr 2020 7:05 pm Board English Language
0
61
Fri 24 Apr 2020 7:05 pm By prmindphp
Creating social share buttons, share the website's content to Social Media With Plugin Content Msocial
By prmindphp Wed 22 Apr 2020 7:05 pm Board English Language
0
67
Wed 22 Apr 2020 7:05 pm By prmindphp
Create Content Marketing and Product with Content Product Match of MooZiiCart
By prmindphp Tue 21 Apr 2020 7:19 pm Board English Language
0
77
Tue 21 Apr 2020 7:19 pm By prmindphp
Filtering for find the product with Module Filter product of MooZiiCart
By prmindphp Thu 09 Apr 2020 6:51 pm Board English Language
0
73
Thu 09 Apr 2020 6:51 pm By prmindphp
Template Megadeal of MooZiiCart for creating websites to sell products online
By prmindphp Fri 03 Apr 2020 6:45 pm Board English Language
0
257
Fri 03 Apr 2020 6:45 pm By prmindphp
Displaying products that customers are interested by Wishlist Module
By prmindphp Fri 27 Mar 2020 5:46 pm Board English Language
0
470
Fri 27 Mar 2020 5:46 pm By prmindphp
Show the Bestsellers Product by Module Bestseller
By prmindphp Wed 25 Mar 2020 6:04 pm Board English Language
0
285
Wed 25 Mar 2020 6:04 pm By prmindphp
Show Products Category by Module Category
By prmindphp Tue 24 Mar 2020 6:07 pm Board English Language
0
304
Tue 24 Mar 2020 6:07 pm By prmindphp
Plugin System MZC Auto Close to enable the open and close odering system
By prmindphp Wed 19 Feb 2020 6:38 pm Board English Language
0
2969
Wed 19 Feb 2020 6:38 pm By prmindphp
MDPartner Component for store client data in CRM system
By prmindphp Sat 25 Jan 2020 3:04 pm Board English Language
0
752
Sat 25 Jan 2020 3:04 pm By prmindphp
i am looking for help
By Anonymous Tue 14 Jan 2020 5:46 pm Board English Language
1
772
Tue 14 Jan 2020 6:03 pm By noppadonsk
Dot Net Training
By Poonaam Fri 10 Jan 2020 2:20 pm Board English Language
0
955
Fri 10 Jan 2020 2:20 pm By Poonaam
MDRental, Area management assistant for rental business
By prmindphp Wed 08 Jan 2020 6:51 pm Board English Language
0
741
Wed 08 Jan 2020 6:51 pm By prmindphp
Fix Gmail Error 404 By Taking Gmail Help Quickly
By Anonymous Wed 08 Jan 2020 2:56 pm Board English Language
0
748
Wed 08 Jan 2020 2:56 pm By Anonymous