Scribd
Upload
11 views21 pages

Event - Handling in Javascript

The document explains HTML events, which are actions that occur in relation to HTML elements, and how JavaScript can respond to these events through event handlers. It details various common HTML events, methods for accessing and manipulating HTML elements via the Document Object Model (DOM), and how to dynamically change content and attributes using JavaScript. Additionally, it highlights the structure of the DOM and the standard methods and properties available for interacting with HTML elements.

Uploaded by

oesophagusfetish
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
11 views21 pages

Event - Handling in Javascript

The document explains HTML events, which are actions that occur in relation to HTML elements, and how JavaScript can respond to these events through event handlers. It details various common HTML events, methods for accessing and manipulating HTML elements via the Document Object Model (DOM), and how to dynamically change content and attributes using JavaScript. Additionally, it highlights the structure of the DOM and the standard methods and properties available for interacting with HTML elements.

Uploaded by

oesophagusfetish
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 21

Events

HTML events are "things" that happen to HTML elements.

When JavaScript is used in HTML pages, JavaScript can "react" on these

events.

HTML Events
An HTML event can be something the browser does, or something a user does.

Here are some examples of HTML events:

●​ An HTML web page has finished loading

●​ An HTML input field was changed

●​ An HTML button was clicked

Often, when events happen, you may want to do something.

JavaScript lets you execute code when events are detected.

HTML allows event handler attributes, with JavaScript code, to be added to

HTML elements.

With single quotes:

<element event='some JavaScript'>

With double quotes:

<element event="some JavaScript">

In the following example, an onclick attribute (with code), is added to a

<button> element:
<html>

<body>

<h1>JavaScript HTML Events</h1>

<h2>The onclick Attribute</h2>

<button onclick="document.getElementById('demo').innerHTML=Date()">The time is : </button>

<p id="demo"></p>

</body>

</html>

In the example above, the JavaScript code changes the content of the element

with id="demo".

In the next example, the code changes the content of its own element (using

this.innerHTML):

<!DOCTYPE html>

<html>

<body>

<h1>JavaScript HTML Events</h1>

<h2>The onclick Attribute</h2>

<button onclick="this.innerHTML=Date()">The time is?</button>

</body>
</html>

JavaScript code is often several lines long. It is more common to see event

attributes calling functions:

<html>

<body>

<h1>JavaScript HTML Events</h1>

<h2>The onclick Attribute</h2>

<p>Click the button to display the date.</p>

<button onclick="displayDate()">The time is?</button>

<script>

function displayDate() {

document.getElementById("demo").innerHTML = Date();

</script>

<p id="demo"></p>

</body>

</html>

Here is a list of some common HTML events:


Event Description

onchange An HTML element has been changed

onclick The user clicks an HTML element

onmouseover The user moves the mouse over an HTML element

onmouseout The user moves the mouse away from an HTML element

onkeydown The user pushes a keyboard key

onload The browser has finished loading the page

JavaScript Event Handlers


Event handlers can be used to handle and verify user input, user actions, and

browser actions:

●​ Things that should be done every time a page loads

●​ Things that should be done when the page is closed

●​ Action that should be performed when a user clicks a button

●​ Content that should be verified when a user inputs data

●​ And more ...

Many different methods can be used to let JavaScript work with events:

●​ HTML event attributes can execute JavaScript code directly

●​ HTML event attributes can call JavaScript functions

●​ You can assign your own event handler functions to HTML elements
●​ You can prevent events from being sent or being handled

●​ And more ...

DOM Events allow JavaScript to add event listener or event handlers to HTML

elements.

<button onclick="myFunction()">Click me</button>

button.addEventListener("click", myFunction);

Event Occurs When Belongs To

abort The loading of a media is aborted UiEvent, Event

afterprint A page has started printing Event

animatione A CSS animation has completed AnimationEvent

nd

animationit A CSS animation is repeated AnimationEvent

eration

animationst A CSS animation has started AnimationEvent

art

beforeprint A page is about to be printed Event

beforeunloa Before a document is about to be UiEvent, Event

d unloaded

blur An element loses focus FocusEvent


canplay The browser can start playing a media Event

(has buffered enough to begin)

canplaythro The browser can play through a media Event

ugh without stopping for buffering

change The content of a form element has Event

changed

click An element is clicked on MouseEvent

contextmen An element is right-clicked to open a MouseEvent

u context menu

copy The content of an element is copied ClipboardEvent

cut The content of an element is cut ClipboardEvent

dblclick An element is double-clicked MouseEvent

drag An element is being dragged DragEvent

dragend Dragging of an element has ended DragEvent

dragenter A dragged element enters the drop DragEvent

target

dragleave A dragged element leaves the drop DragEvent

target
dragover A dragged element is over the drop DragEvent

target

dragstart Dragging of an element has started DragEvent

drop A dragged element is dropped on the DragEvent

target

durationcha The duration of a media is changed Event

nge

ended A media has reach the end ("thanks for Event

listening")

error An error has occurred while loading a ProgressEvent,

file UiEvent, Event

focus An element gets focus FocusEvent

focusin An element is about to get focus FocusEvent

focusout An element is about to lose focus FocusEvent

fullscreench An element is displayed in fullscreen Event

ange mode

fullscreener An element can not be displayed in Event

ror fullscreen mode


hashchange There has been changes to the anchor HashChangeEvent

part of a URL

input An element gets user input InputEvent, Event

invalid An element is invalid Event

keydown A key is down KeyboardEvent

keypress A key is pressed KeyboardEvent

keyup A key is released KeyboardEvent

load An object has loaded UiEvent, Event

loadeddata Media data is loaded Event

loadedmeta Meta data (like dimensions and Event

data duration) are loaded

loadstart The browser starts looking for the ProgressEvent

specified media

message A message is received through the Event

event source

mousedown The mouse button is pressed over an MouseEvent

element
mouseenter The pointer is moved onto an element MouseEvent

mouseleave The pointer is moved out of an element MouseEvent

mousemove The pointer is moved over an element MouseEvent

mouseover The pointer is moved onto an element MouseEvent

mouseout The pointer is moved out of an element MouseEvent

mouseup A user releases a mouse button over an MouseEvent

element

mousewhee Deprecated. Use the wheel event WheelEvent

l instead

offline The browser starts working offline Event

online The browser starts working online Event

open A connection with the event source is Event

opened

pagehide User navigates away from a webpage PageTransitionEvent

pageshow User navigates to a webpage PageTransitionEvent

paste Some content is pasted in an element ClipboardEvent

pause A media is paused Event


play The media has started or is no longer Event

paused

playing The media is playing after being paused Event

or buffered

popstate The window's history changes PopStateEvent

progress The browser is downloading media data Event

ratechange The playing speed of a media is Event

changed

resize The document view is resized UiEvent, Event

reset A form is reset Event

scroll An scrollbar is being scrolled UiEvent, Event

search Something is written in a search field Event

seeked Skipping to a media position is finished Event

seeking Skipping to a media position is started Event

select User selects some text UiEvent, Event

show A <menu> element is shown as a Event

context menu
stalled The browser is trying to get unavailable Event

media data

storage A Web Storage area is updated StorageEvent

submit A form is submitted Event

suspend The browser is intentionally not getting Event

media data

timeupdate The playing position has changed (the Event

user moves to a different point in the

media)

toggle The user opens or closes the <details> Event

element

touchcancel The touch is interrupted TouchEvent

touchend A finger is removed from a touch TouchEvent

screen

touchmove A finger is dragged across the screen TouchEvent

touchstart A finger is placed on a touch screen TouchEvent

transitionen A CSS transition has completed TransitionEvent

d
unload A page has unloaded UiEvent, Event

volumechan The volume of a media is changed Event

ge (includes muting)

waiting A media is paused but is expected to Event

resume (e.g. buffering)

wheel The mouse wheel rolls up or down over WheelEvent

an element

ith the HTML DOM, JavaScript can access and change all the elements of an

HTML document.

The HTML DOM (Document Object Model)


When a web page is loaded, the browser creates a Document Object Model of

the page.

The HTML DOM model is constructed as a tree of Objects:

The HTML DOM Tree of Objects


With the object model, JavaScript gets all the power it needs to create dynamic

HTML:

●​ JavaScript can change all the HTML elements in the page

●​ JavaScript can change all the HTML attributes in the page

●​ JavaScript can change all the CSS styles in the page

●​ JavaScript can remove existing HTML elements and attributes

●​ JavaScript can add new HTML elements and attributes

●​ JavaScript can react to all existing HTML events in the page

●​ JavaScript can create new HTML events in the page

The DOM is a W3C (World Wide Web Consortium) standard.

The DOM defines a standard for accessing documents:

"The W3C Document Object Model (DOM) is a platform and language-neutral

interface that allows programs and scripts to dynamically access and update the

content, structure, and style of a document."

The W3C DOM standard is separated into 3 different parts:


●​ Core DOM - standard model for all document types

●​ XML DOM - standard model for XML documents

●​ HTML DOM - standard model for HTML documents

The HTML DOM is a standard object model and programming interface for

HTML. It defines:

●​ The HTML elements as objects

●​ The properties of all HTML elements

●​ The methods to access all HTML elements

●​ The events for all HTML elements

In other words: The HTML DOM is a standard for how to get, change, add, or

delete HTML elements.

In the DOM, all HTML elements are defined as objects.

A property is a value that you can get or set (like changing the content of an

HTML element).

A method is an action you can do (like add or deleting an HTML element).

Example
The following example changes the content (the innerHTML) of the <p> element

with id="demo":

<html>

<body>
<p id="demo"></p>

<script>

document.getElementById("demo").innerHTML = "Hello World!";

</script>

</body>

</html>

getElementById is a method, while innerHTML is a property.

he innerHTML Property
The easiest way to get the content of an element is by using the innerHTML

property.

The innerHTML property is useful for getting or replacing the content of HTML

elements.

The innerHTML property can be used to get or change any HTML element, including

<html> and <body>.

The HTML DOM Document Object


The document object represents your web page.

If you want to access any element in an HTML page, you always start with

accessing the document object.


Below are some examples of how you can use the document object to access

and manipulate HTML.

Finding HTML Elements

Method Description

document.getElementById(id) Find an element by element id

document.getElementsByTagName(na Find elements by tag name

me)

document.getElementsByClassName(n Find elements by class name

ame)

Changing HTML Elements

Property Description

element.innerHTML = new html Change the inner HTML of an

content element

element.attribute = new value Change the attribute value of an

HTML element
element.style.property = new style Change the style of an HTML

element

Method Description

element.setAttribute(attribute, value) Change the attribute value of an

HTML element

Adding and Deleting Elements

Method Description

document.createElement(element) Create an HTML element

document.removeChild(element) Remove an HTML element

document.appendChild(element) Add an HTML element

document.replaceChild(new, old) Replace an HTML element

document.write(text) Write into the HTML output stream

Adding Events Handlers

Method Description
document.getElementById(id).onclick Adding event handler code to an

= function(){code} onclick event

HTML DOM methods are actions you can perform (on HTML Elements).

HTML DOM properties are values (of HTML Elements) that you can set or

change.

The DOM Programming Interface


The HTML DOM can be accessed with JavaScript (and with other programming

languages).

In the DOM, all HTML elements are defined as objects.

The programming interface is the properties and methods of each object.

A property is a value that you can get or set (like changing the content of an

HTML element).

A method is an action you can do (like add or deleting an HTML element).

Example
The following example changes the content (the innerHTML) of the <p> element

with id="demo":

<html>

<body>

<p id="demo"></p>

<script>

document.getElementById("demo").innerHTML = "Hello World!";

</script>

</body>

</html>

In the example above, getElementById is a method, while innerHTML is a

property.

The getElementById Method


The most common way to access an HTML element is to use the id of the

element.

In the example above the getElementById method used id="demo" to find the

element.

The innerHTML Property


The easiest way to get the content of an element is by using the innerHTML

property.

The innerHTML property is useful for getting or replacing the content of HTML

elements.

Changing HTML Content


The easiest way to modify the content of an HTML element is by using the

innerHTML property.

To change the content of an HTML element, use this syntax:

document.getElementById(id).innerHTML = new HTML

Changing the Value of an Attribute


To change the value of an HTML attribute, use this syntax:

document.getElementById(id).attribute = new value

This example changes the value of the src attribute of an <img> element:

<!DOCTYPE html>

<html>

<body>

<img id="myImage" src="smiley.gif">

<script>

document.getElementById("myImage").src = "landscape.jpg";
</script>

</body>

</html>

Dynamic HTML content


JavaScript can create dynamic HTML content:

Date : Thu Dec 26 2024 11:03:44 GMT+0530 (India Standard Time)

document.write()

You might also like