• JQuery
  • %s
  • JQuery Events and Event Handling

JQuery Events and Event Handling

An HTML page is referred to as an HTML Document. Many user interface objects are composed together to form this document. There is a predefined structure through which this Document is composed. This structure contains Head portion of the document and the Body portion of the Document and other UI Elements are nested in these portions. Collectively this composition is called Document Object Model (DOM).

dom

Now, when you interact with these elements in any way then these elements react to your actions. This time interval of interaction is called an Event. This Event can be captured and certain tasks can be performed during this Event. Performing any operation or any task in this Event is called Event Handling. And Response of an Element to any User interaction is called Event Fire/ Firing of an Event.

In an HTML Document Events can be fired on Mouse interaction or a Keyboard interaction, some Form Events and Some Document/Window Events. Following are some of the Events.

events

Handling Events through JQuery

In JQuery there is a function for each event with the same name of the Event. Such as for click event there is a method called .click() in JQuery. This method is passed an Event Handler which is also a function body in which you write all the tasks you want to perform when this event is fired.

code1

Following is a simple example to clear the concept of event handling. It is a simple HTML Document with a Drop Down and a Button. In Drop Down there are the names of the sites. The purpose is that you select a an Option from the Drop Down for a particular Website to visit to and then click the Button. The action will be that upon click you will be conditionally selecting the website and redirect to that website.

completecode

Above example is a simple explanation of  the event handling with power of being programmed as per your need. But if you want to get more knowledge on this topic you can visit the following URL.

https://learn.jquery.com/events/handling-events/

HAPPY CODING 🙂

  • Show Comments (0)

Your email address will not be published. Required fields are marked *

comment *

  • name *

  • email *

  • website *