jQuery Event Methods - CodingTag

jQuery Events


  • 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:


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

// action goes here!!


<title>jQuery Example</title>
<script type = "text/javascript"

<h2>jQuery events Example</h2>

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



After, click on the button,

Best WordPress Hosting


Discount Coupons

Get a .COM for just $6.98

Secure Domain for a Mini Price

Leave a Reply

    Waiting for your comments