jQuery Tutorial

jQuery Events and Event Handlers

jquery provides the ability to create dynamic web pages by using events.

What is event?

Events are nothing but actions in web application from user or another source. Examples events are

Mouse click
HTML Document loading,/li>
Key press in input control
HTML document unloading
Submit HTML form
Mouse Over on HTML element

Some HTML DOM Events

Event	Description
click()	click
keydown()	key down
keypress()	key press
keyup()	keyup
mouseover()	mouse over
mouseout()	mouse out
mouseenter()	mouse enter
mouseleave()	mouse leave
scroll()	scroll
focus()	focus
blur()	blur
resize()	resize

What is event handler?

An event handler is a custom function that is used to deal with the event, allowing a programmer to execute code that will be executed when the event occurs.

How to bind event handler to an event of HTML Element?

bind() method is available in jQuery to add event handler to HTML element for an event.

bind( eventType [, eventData ], handler )

eventType: A string containing one or more DOM event types, such as "click" or "submit," or custom event names.
eventData: optional argument, An object containing data that will be passed to the event handler.
handler: Custom_function( Event eventObject )

Binding click event to anchor element

<html>
   <head>
      <title>The jQuery Example</title>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>		
      <script type = "text/javascript">
        $(document).ready(function(){
          $("a:first").bind("click", function(event){
             $("p:first").text("Welcome to jQuery Events!");
          });
        });
      </script>		
   </head>	
   <body>
   <a href="#">webpage link.</a>
    <p></p>
   </body>
</html>

Output:

webpage link.

// once cliked webpage link, below message appears.
Welcome to jQuery Events!

Remove Event Handler

jQuery provides provision to remove the event handler anytime in code for that event of html element.

unbind(eventType, handler)
or 
unbind(eventType)

Event Object

Callback function takes a single parameter when handler is invoked.

Event Object Attributes

<html>
   <head>
      <title>The jQuery Example</title>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>		
      <script type = "text/javascript">
         $(document).ready(function() {
            $("div:first").bind('click', function( event ){
               $("p:first").html("Event type is " + event.type +"<br/> page(X, Y) : (" + event.pageX + "," + event.pageY+")<br/>Target : " + event.target.innerHTML);
            });
         });
      </script>

   </head>
	
   <body>
	<div>main div content.</div>	
        <p></p>
   </body>
</html>

Output:

main div content.

//once clicked above, below info appears.
Event type is click
page(X, Y) : (135,17)
Target : main div content.

How to trigger event?

Triggers the click event on paragraph first matching element.

$("div:first").click();

Event Methods

Defines what should happen when the event fires and must pass a function to the event.

$("div").click(function(){
  // actions need to written here.
  alert("Welcome to jQuery Events!");
});

Event handler with multiple call back functions

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

<html>
   <head>
      <title>The jQuery Example</title>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>		
      <script type = "text/javascript">
         $(document).ready(function() {
            $("div:first").hover(function(event){
               alert("mouse hover!");
               },
               function(event) {
               $("p:first").html("Event type is " + event.type +"<br/> page(X, Y) : (" + event.pageX + "," + event.pageY+")<br/>Target : " + event.target.innerHTML);
            });
         });
         $("p").click();
      </script>

   </head>
	
   <body>
	<div>main div content.</div>	
        <p></p>
   </body>
</html>

Output:

Mouse Enter Event Handler

$("#newDiv").mouseenter(function(){
    alert("Enetered into new div!");
});

« Previous Next »

jQuery Programming Examples

Simple Filter HTML Table Rows in jquery

jQuery ui datepicker with disabled date ranges

jQuery ui datepicker change event to submit the form

Getting screen coordinates in jQuery

Getting mouse positions in jQuery

Getting pressed key code in jQuery

Getting multiple elements using tag, id and class in jQuery

Checking element tag in jQuery

Getting element by index in jQuery

Highlights the odd and even rows in different colors in jQuery

Simple Filter HTML Paragraph Tags in jquery

Enable / disable HTML input fields in jQuery

Remove leading and trailing space in text of HTML element using jQuery

jQuery Adding HTML Table Row Dynamically

jQuery Deleting HTML Table Row Dynamically

jQuery Deleting Selected Multiple HTML Table Rows

jQuery Getting Selected Checkbox Values

Update page title using jquery

print objects

jQuery Tutorial