jQuery - SPLessons
boy2 Chapter 10

jQuery Events

jQuery - SPLessons

jQuery Events

shape Description

Actions which can be detected by a web page is known an an event. jQuery easily responds to events in the HTML document page. jQuery Events are used to execute some javascript code, when something happens like on mouse over an element, button clicked etc.

Dynamic and responsive webpages can be created to respond at exact moment when something happen with the help of jQuery Event methods. jQuery syntax is very simple or more powerful.

The events can be categorized as below

shape Events

Here are some of the common DOM events:

mouse events keyboard events form events document/window events
click keypress focus load
dblclick keydown submit unload
mouseenter keyup change ready
hover focusout blur scroll
mousemove select error

Events in jQuery

shape More Info

click() method

shape Description

The click() method will run when the user clicks on the selected HTML element. The attached function is executed when the user clicks on that element. The following example will show a alert message when clicked on

elements on a page.

Syntax:

$(selector).click(function)

<html>
<head>
  <title>jQuery click()</title>
</head>

<body>

<h1>Welcome to SPLessons</h1>
<p>click on this paragraph</p>

  </body>
</html>

$(document).ready(function(){
  $("p").click(function(){
    alert("paragraph was clicked !");
  })
});

Output:

dblclick() method

shape Description

The dblclick() method will run when the user double clicks on the selected HTML element. The attached function is executed when the user double-clicks on that element. The following example will show an alert message when double clicked on the

elements.

Syntax:

$(selector).dblclick(function)

<html>
<head>
  <title>jQuery dblclick()</title>
</head>

<body>

<h1>Welcome to SPLessons</h1>
<p>double click on this paragraph</p>

  </body>
</html>

$(document).ready(function(){
  $("p").dblclick(function(){
    alert("paragraph was double clicked !");
  })
});

Output:

hover() method

shape Description

The hover() method will run when the user mouseenter and mouseleave on the selected HTML element. The first function is executed when the user place the mouse pointer over an element, whereas the second function is executed when the user removes the mouse pointer from that element.

Syntax:

$(selector).hover(inFunction,outFunction)

<html>
<head>
  <title>jQuery hover()</title>
</head>

<body>

<h1>Welcome to SPLessons</h1>
<p>hover on this paragraph</p>

  </body>
</html>

$(document).ready(function() {
   $("p").hover(function(){
       $("p").text("Mouse In");
     },
    function(){
      $("p").text("Mouse Out");
     });
});

Output:

focus() method

shape Description

The focus() method will run when the element gets focus. The following example will display a message when the text input receive focus.

Syntax:

$(selector).focus(function)


$(document).ready(function() {
    $("#name").focus(function(){
       console.log("name field is focused.");
    })
    
})

keyup() and keydown() methods

shape Description

The keydown method is executed when a key is pressed down and the keyup method is executed when the pressed key is released.

Syntax: Keyup

$(selector).keyup(function)

Syntax: Keydown
$(selector).keydown(function)

<html>
<head>
  <title>jQuery keyup() and keydown()</title>
</head>

<body>

<h1>Welcome to SPLessons</h1>
  <label for="name">Name:</label>
<input type="text" id="name" name="name" />

  </body>
</html>

$(document).ready(function() {
    $("#name").keyup(function(){
       $("#name").css("background-color","yellow");
    });
    
    $("#name").keydown(function(){
       $("#name").css("background-color","red");
    });
    
});

Output:

Summary

shape Key Points

  • Actions which can be detected by a web page is known an an event.
  • Click,hover,focus,key up and down are some of the jQuery events.