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()
