Scribd
Upload
135 views

JS EventHandling

The document discusses JavaScript events and event handling. It defines events as changes in the state of an object, such as user interactions like clicks or keyboard presses. It describes how JavaScript can define event handlers that react to these events. It provides examples of common event types like click, mouseover, focus, and load, and how to attach event handler functions to them in HTML and JavaScript. It also introduces the addEventListener method for adding multiple event handlers to an element without overwriting existing ones.

Uploaded by

ISR Educations
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
135 views

JS EventHandling

The document discusses JavaScript events and event handling. It defines events as changes in the state of an object, such as user interactions like clicks or keyboard presses. It describes how JavaScript can define event handlers that react to these events. It provides examples of common event types like click, mouseover, focus, and load, and how to attach event handler functions to them in HTML and JavaScript. It also introduces the addEventListener method for adding multiple event handlers to an element without overwriting existing ones.

Uploaded by

ISR Educations
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 7

JavaScript Events

The change in the state of an object is known as an Event. In html, there are
various events which represents that some activity is performed by the user or by
the browser. When javascript code is included in HTML, js react over these events
and allow the execution. This process of reacting over the events is called Event
Handling. Thus, js handles the HTML events via Event Handlers.

For example, when a user clicks over the browser, add js code, which will execute
the task to be performed on the event.

Some of the HTML events and their event handlers are:

Mouse events:
Event Performed Event Handler Description
click onclick When mouse click on an element
mouseover onmouseover When the cursor of the mouse comes over the element
mouseout onmouseout When the cursor of the mouse leaves an element
mousedown onmousedown When the mouse button is pressed over the element
mouseup onmouseup When the mouse button is released over the element
mousemove onmousemove When the mouse movement takes place.
Keyboard events:
Event Performed Event Handler Description
Keydown & Keyup onkeydown & onkeyup When the user press and then release the
key
Form events:
Event Performed Event Handler Description
focus onfocus When the user focuses on an element
submit onsubmit When the user submits the form
blur onblur When the focus is away from a form element
change onchange When the user modifies or changes the value of a form
element
Window/Document events
Event Performed Event Handler Description
load onload When the browser finishes the loading of the page
unload onunload When the visitor leaves the current webpage, the browser
unloads it
resize onresize When the visitor resizes the window of the browser
Let's discuss some examples over events and their handlers.

Click Event
<html>
<head> Javascript Events </head>
<body>
<script language="Javascript" type="text/Javascript">
<!--
function clickevent()
{
document.write("This is JavaTpoint");
}
//-->
</script>
<form>
<input type="button" onclick="clickevent()" value="Who's this?"/>
</form>
</body>
</html>
-----------
MouseOver Event
<html>
<head>
<h1> Javascript Events </h1>
</head>
<body>
<script language="Javascript" type="text/Javascript">
<!--
function mouseoverevent()
{
alert("This is JavaTpoint");
}
//-->
</script>
<p onmouseover="mouseoverevent()"> Keep cursor over me</p>
</body>
</html>
-----------
Focus Event
<html>
<head> Javascript Events</head>
<body>
<h2> Enter something here</h2>
<input type="text" id="input1" onfocus="focusevent()"/>
<script>
<!--
function focusevent()
{
document.getElementById("input1").style.background=" aqua";
}
//-->
</script>
</body>
</html>
-----------
Keydown Event
<html>
<head> Javascript Events</head>
<body>
<h2> Enter something here</h2>
<input type="text" id="input1" onkeydown="keydownevent()"/>
<script>
<!--
function keydownevent()
{
document.getElementById("input1");
alert("Pressed a key");
}
//-->
</script>
</body>
</html>

Load event
<html>
<head>Javascript Events</head>
</br>
<body onload="window.alert('Page successfully loaded');">
<script>
<!--
document.write("The page is loaded successfully");
//-->
</script>
</body>
</html>
=============

JavaScript addEventListener()
The addEventListener() method is used to attach an event handler to a particular
element. It does not override the existing event handlers. Events are said to be an
essential part of the JavaScript. A web page responds according to the event that
occurred. Events can be user-generated or generated by API's. An event listener is
a JavaScript's procedure that waits for the occurrence of an event.

The addEventListener() method is an inbuilt function of JavaScript. We can add


multiple event handlers to a particular element without overwriting the existing
event handlers.

Syntax
element.addEventListener(event, function, useCapture);
Although it has three parameters, the parameters event and function are widely
used. The third parameter is optional to define. The values of this function are
defined as follows.

Parameter Values
event: It is a required parameter. It can be defined as a string that specifies the
event's name.

Note: Do not use any prefix such as "on" with the parameter value. For example, Use
"click" instead of using "onclick".
function: It is also a required parameter. It is a JavaScript function which
responds to the event occur.

useCapture: It is an optional parameter. It is a Boolean type value that specifies


whether the event is executed in the bubbling or capturing phase. Its possible
values are true and false. When it is set to true, the event handler executes in
the capturing phase. When it is set to false, the handler executes in the bubbling
phase. Its default value is false.

Let's see some of the illustrations of using the addEventListener() method.

Example
It is a simple example of using the addEventListener() method. We have to click the
given HTML button to see the effect.

<!DOCTYPE html>
<html>
<body>
<p> Example of the addEventListener() method. </p>
<p> Click the following button to see the effect. </p>
<button id = "btn"> Click me </button>
<p id = "para"></p>
<script>
document.getElementById("btn").addEventListener("click", fun);
function fun() {
document.getElementById("para").innerHTML = "Hello World" + "<br>" + "Welcome to
the JatinderDeveloper.com";
}
</script>
</body>
</html>
==========
Example
In this example, we are adding multiple events to the same element.

<!DOCTYPE html>
<html>
<body>
<p> This is an example of adding multiple events to the same element. </p>
<p> Click the following button to see the effect. </p>
<button id = "btn"> Click me </button>
<p id = "para"></p>
<p id = "para1"></p>
<script>
function fun() {
alert("Welcome to the JatinderDeveloper.com");
}

function fun1() {
document.getElementById("para").innerHTML = "This is second function";

}
function fun2() {
document.getElementById("para1").innerHTML = "This is third function";
}
var mybtn = document.getElementById("btn");
mybtn.addEventListener("click", fun);
mybtn.addEventListener("click", fun1);
mybtn.addEventListener("click", fun2);
</script>
</body>
</html>
======
adding multiple events of a different type to the same element.

<!DOCTYPE html>
<html>
<body>
<p> This is an example of adding multiple events of different type to the same
element. </p>
<p> Click the following button to see the effect. </p>
<button id = "btn"> Click me </button>
<p id = "para"></p>
<script>
function fun() {
btn.style.width = "50px";
btn.style.height = "50px";
btn.style.background = "yellow";
btn.style.color = "blue";
}

function fun1() {
document.getElementById("para").innerHTML = "This is second function";

}
function fun2() {
btn.style.width = "";
btn.style.height = "";
btn.style.background = "";
btn.style.color = "";
}
var mybtn = document.getElementById("btn");
mybtn.addEventListener("mouseover", fun);
mybtn.addEventListener("click", fun1);
mybtn.addEventListener("mouseout", fun2);
</script>
</body>
</html>
============
ONCLICK EVENT
JavaScript onclick event
The onclick event generally occurs when the user clicks on an element. It allows
the programmer to execute a JavaScript's function when an element gets clicked.
This event can be used for validating a form, warning messages and many more.

Using JavaScript, this event can be dynamically added to any element. It supports
all HTML elements except <html>, <head>, <title>, <style>, <script>, <base>,
<iframe>, <bdo>, <br>, <meta>, and <param>. It means we cannot apply the onclick
event on the given tags.

In HTML, we can use the onclick attribute and assign a JavaScript function to it.
We can also use the JavaScript's addEventListener() method and pass a click event
to it for greater flexibility.

Syntax
Now, we see the syntax of using the onclick event in HTML and in javascript
(without addEventListener() method or by using the addEventListener() method).

In HTML
<element onclick = "fun()">
In JavaScript
object.onclick = function() { myScript };
In JavaScript by using the addEventListener() method
object.addEventListener("click", myScript);
Let's see how to use onclick event by using some illustrations. Now, we will see
the examples of using the onclick event in HTML, and in JavaScript.

Example1 - Using onclick attribute in HTML


In this example, we are using the HTML onclick attribute and assigning a
JavaScript's function to it. When the user clicks the given button, the
corresponding function will get executed, and an alert dialog box will be displayed
on the screen.

<!DOCTYPE html>
<html>
<head>
<script>
function fun() {
alert("Welcome to the JatinderDeveloper.com");
}
</script>
</head>
<body>
<h3> This is an example of using onclick attribute in HTML. </h3>
<p> Click the following button to see the effect. </p>
<button onclick = "fun()">Click me</button>
</body>
</html>
=====
Example2 - Using JavaScript
In this example, we are using JavaScript's onclick event. Here we are using the
onclick event with the paragraph element.

When the user clicks on the paragraph element, the corresponding function will get
executed, and the text of the paragraph gets changed. On clicking the <p> element,
the background color, size, border, and color of the text will also get change.

<!DOCTYPE html>
<html>
<head>
<title> onclick event </title>
</head>
<body>
<h3> This is an example of using onclick event. </h3>
<p> Click the following text to see the effect. </p>
<p id = "para">Click me</p>
<script>
document.getElementById("para").onclick = function() {
fun()
};
function fun() {
document.getElementById("para").innerHTML = "Welcome to the JatinderDeveloper.com";

document.getElementById("para").style.color = "blue";
document.getElementById("para").style.backgroundColor = "yellow";
document.getElementById("para").style.fontSize = "25px";
document.getElementById("para").style.border = "4px solid red";
}
</script>

</body>
</html>
======
Example3 - Using addEventListener() method
In this example, we are using JavaScript's addEventListener() method to attach a
click event to the paragraph element. When the user clicks the paragraph element,
the text of the paragraph gets changed.

On clicking the paragraph, the background color and font-size of elements will also
change.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h3> This is an example of using click event. </h3>
<p> Click the following text to see the effect. </p>
<p id = "para">Click me</p>
<script>
document.getElementById("para").onclick = function() {
fun()
};
function fun() {
document.getElementById("para").innerHTML = "Welcome to the JatinderDeveloper.com";

document.getElementsByTagName("body")[0].style.color = "blue";
document.getElementsByTagName("body")[0].style.backgroundColor = "lightgreen";
document.getElementsByTagName("body")[0].style.fontSize = "25px";
document.getElementById("para").style.border = "4px solid red";
}
</script>

</body>
</html>
==========
dbClick EVENT

JavaScript dblclick event


The dblclick event generates an event on double click the element. The event fires
when an element is clicked twice in a very short span of time. We can also use the
JavaScript's addEventListener() method to fire the double click event.

In HTML, we can use the ondblclick attribute to create a double click event.

Syntax
Now, we see the syntax of creating double click event in HTML and in javascript
(without using addEventListener() method or by using the addEventListener()
method).

In HTML
<element ondblclick = "fun()">
In JavaScript
object.ondblclick = function() { myScript };
In JavaScript by using the addEventListener() method
object.addEventListener("dblclick", myScript);
Let's see some of the illustrations to understand the double click event.

Example - Using ondblclick attribute in HTML


In this example, we are creating the double click event using the HTML ondblclick
attribute.

<!DOCTYPE html>
<html>
<head>
</head>

<body>
<h1 id = "heading" ondblclick = "fun()"> Hello world :):) </h1>
<h2> Double Click the text "Hello world" to see the effect. </h2>
<p> This is an example of using the <b> ondblclick </b> attribute. </p>
<script>
function fun() {
document.getElementById("heading").innerHTML = " Welcome to the
JatinderDeveloper.com ";
}
</script>
</body>
</html>

You might also like