Event and Event

Handling

SUBMITTED BY :
YOGITA, 19071211
What is Event ?
In programming, an event is an action that occurs as a result
of the user or another source, such as a mouse click.
An event handler is a routine that deals with the event,
allowing a programmer to write code that will be executed
when the event occurs.
Other common event
examples
A web browser completely loading a web page.
A file being created or modified on a filesystem.
A hardware sensor such as a webcam or microphone
receiving sensory input.
The arrival of incoming network traffic.
The occurrence of an error at the program or system level.
Event Handling
Event Handling is a software routine that processes actions,
such as keystrokes and mouse movements.
It is the receipt of an event at some event handler from an
event producer and subsequent processes.
Functions of Event Handling
Event Handling identifies where an event should be
forwarded.
It makes the forward event.
It receives the forwarded event.
It takes some kind of appropriate action in response, such as
writing to a log, sending an error or recovery routine or sending a
message.
The event handler may ultimately forward the event to an event
consumer.
 Event handling in the DOM

What is DOM?
The Document Object Model (DOM) is a programming API for HTML and
XML documents. It defines the logical structure of documents and the way
a document is accessed and manipulated. Nevertheless, XML presents this
data as documents, and the DOM may be used to manage this data.
Event handling in the DOM

Event handling has been part of JavaScript since the language's

inception. They refer to specific, user imitated actions within the
webpage, such as the moving of your mouse over a link, the
clicking on a link, or submission of a form. Thanks to event
handling, our scripts are more interactive and are able to perform
certain actions depending on the user's.
The DOM of modern web browsers such as IE5+, NS6+, and
Firefox provide expanded methods and flexibility (relative to older
browsers) for capturing events.
The two traditional ways of
assigning event handlers

Let's first review (for most of us, at least) the 2 common and
conventional ways of setting up an event handler- via HTML,
or scripting. In both cases, a function or code is attached at
the end, which is executed when the handler detects the
specified event.
1) Via HTML, using
attributes

We can define an event handler directly inside the relevant

HTML tag, by embedding it as a attribute. A piece of
JavaScript is also included to tell the browser to perform
something when the event occurs.
2) Via scripting

You can also assign and set up event handlers to

elements using scripting, and inside your script . This
allows for the event handlers to be dynamically set up,
without having to mess around with the HTML codes on
the page.
When setting up event handlers for an element directly
inside your script, the code to execute for the events
must be defined inside a function
jQuery 

jQuery is an open source JavaScript library that simplifies the

interactions between an HTML/CSS document, or more precisely the
Document Object Model (DOM), and JavaScript.

Elaborating the terms, jQuery simplifies HTML document traversing

and manipulation, browser event handling, DOM animations, Ajax
interactions, and cross-browser JavaScript development.
Using jQuery (JS) library on
HTML page
There are several ways to start using jQuery on your web site.
Use the Google-hosted/ Microsoft-hosted content delivery network
(CDN) to include a version of jQuery.
Download own version of jQuery from jQuery.com and host it on
own server or local filesystem.
Basic syntax for any jQuery
function is:

$(selector).action()
•A $ sign is to define/access jQuery
•A (selector) is to “query (or find)” HTML elements in html page
•A jQuery action() is the action to be performed on the selected elemen
jQuery Selectors

jQuery selectors allow you to select and manipulate HTML

element(s).
jQuery selectors are used to "find" (or select) HTML elements based
on their name, id, classes, types, attributes, values of attributes and
much more. It's based on the existing CSS Selectors, and in addition,
it has some own custom selectors.
All selectors in jQuery start with the dollar sign and parentheses: $().
More Examples of jQuery
Selectors
Syntax Description

$("*") Selects all elements

$(this) Selects the current HTML element
$("p.intro") Selects all <p> elements with class="intro"

$("p:first") Selects the first <p> element

$("ul li:first") Selects the first <li> element of the first <ul>

$("ul li:first-child") Selects the first <li> element of every <ul>

$("[href]") Selects all elements with an href attribute

$("a[target='_blank']") Selects all <a> elements with a target attribute value equal to "_blank"

$("a[target!='_blank']") Selects all <a> elements with a target attribute value NOT equal to "_blank"
$(":button") Selects all <button> elements and <input> elements of type="button"

$("tr:even") Selects all even <tr> elements

$("tr:odd") Selects all odd <tr> elements
jQuery AJAX Methods

AJAX is the art of exchanging data with a server, and update parts of a web page - without
reloading the whole page.

Method Description
$.ajax() Performs an async AJAX request
$.ajaxPrefilter() Handle custom Ajax options or modify existing options before each request is
sent and before they are processed by $.ajax()

$.ajaxSetup() Sets the default values for future AJAX requests

$.ajaxTransport() Creates an object that handles the actual transmission of Ajax data

$.get() Loads data from a server using an AJAX HTTP GET request
Some other jQuery AJAX
methods:
ajaxComplete() Specifies a function to run when the AJAX request
completes

ajaxError() Specifies a function to run when the AJAX request

completes with an error

ajaxSend() Specifies a function to run before the AJAX request is sent

ajaxStart() Specifies a function to run when the first AJAX request

begins

ajaxStop() Specifies a function to run when all AJAX requests have

completed

ajaxSuccess() Specifies a function to run when an AJAX request completes

successfully

load() Loads data from a server and puts the returned data into
the selected element