JavaScript Tutorial || JavaScript Events
JavaScript Events
A function or method containing program statements that are executed in response to an event. An event handler typically is a software routine that processes actions such as keystrokes and mouse movements.
Events that represent that some activity is performed by the user or by the browser. javascript code is handling the HTML events via Event Handlers. Events are a part of the Document Object Model (DOM) Level 3 and every HTML element contains a set of events that can trigger JavaScript Code.
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
For example, which causes buttons to delete data, messages to be displayed to users, are you sure you want to delete, and virtually any other type of responses
<!DOCTYPE html>
<html>
<body>
<button
onclick="alert('are you sure you want to delete')">Delete.</button>
</body>
</html>HTML event Handler
A function or method containing program statements that are executed in response to an event. An event handler typically is a software routine that processes actions such as keystrokes and mouse movements.
Handler | Description |
|---|---|
onclick | When mouse click on an element |
onmouseover | When the cursor of the mouse comes over the element |
onmouseout | When the cursor of the mouse leaves an element |
onmousedown | When the mouse button is pressed over the element |
onmouseup | When the mouse button is released over the element |
onmousemove | When the mouse movement takes place. |
onkeydown & onkeyup | When the user press and then release the key |
onfocus | When the user focuses on an element |
onsubmit | When the user submits the form |
onblur | When the focus is away from a form element |
onchange | When the user modifies or changes the value of a form element |
download | When the browser finishes the loading of the page |
onunload | When the visitor leaves the current webpage |
onresize | When the visitor resizes the window of the browser |
HTML DOM addEventListener() Method
The Web platform provides several ways to be notified of DOM events. Two common approaches are addEventListener() and the specific onevent handlers
The addEventListener() method attaches an event handler to the specified element.
Syntax
element.addEventListener(event, function, useCapture)1) event
A String that specifies the name of the event. (Required)
For example, click
document.getElementById("Btn").addEventListener("click", myFunction);
function myFunction() { document.getElementById("div").innerHTML = "Hello World";}2) function
Specifies the function to run when the event occurs.(Required.)
For example, myFunction
document.getElementById("Btn").addEventListener("click", myFunction);3) useCapture
A Boolean value that specifies whether the event should be executed in the capturing or in the bubbling phase.(Optional.)
For example,
- true - The event handler is executed in the capturing phase
- false - Default. The event handler is executed in the bubbling phase
document.getElementById("Div").addEventListener("click", myFunction, true);Example
<!DOCTYPE html>
<html>
<body>
<button id="Btn">submit</button>
<p id="demo">
<script>
document.getElementById("Btn").addEventListener("click", myFunction);
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}
</html>
</script>
</body>
