jQuery Event Methods - CodingTag
×


jQuery Events

0 852

  • To make a page dynamic and responsive, we need to perform some actions on the HTML DOM elements.
  • These actions are called events.
  • Although JavaScript has several built-in ways of reacting to user interaction and other events, jQuery enhances and extends the basic event handling mechanisms to give them a more elegant syntax and making them more powerful.
  • Some examples of events are listed below:
  • A mouse click
  • Form submission
  • Loading a web page
  • Web page scrolling
  • Pressing a key on the keyboard
  • Mouse hover on an element

Related Topics:

jQuery Syntax
jQuery Selectors

jQuery Events

Some most useful HTML DOM events are listed below:

1 Mouse events:

  • click
  • dblclick
  • mouseenter
  • mouseleave
  • 2 keyboard events:

  • keyup
  • keydown
  • keypress
  • 3 form events:

  • submit
  • change
  • blur
  • focus
  • 4 Document/Window Events:

  • load
  • unload
  • scroll
  • resize

The syntax for events in jQuery:

In the jQuery library, there is an equal range of methods for most of the DOM events.

For example: if you want to assign a click event on a button, the syntax is like:

$("button").click();

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

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

Example:

<html>
<head>
<title>jQuery Example</title>
<script type = "text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$(".bt").click(function(){
$("body").css("background","pink");
});
});
</script>
</head>
<body>

<h2>jQuery events Example</h2>

<button class="bt">Click me to change the color of background</button>

</body>
</html>

Output:

After, click on the button,



Best WordPress Hosting


Share:


Leave a Reply


Comments
    Waiting for your comments