Scribd
Upload
40 views

Java Script L20

JavaScript can execute code in response to events in an HTML document, such as when an element is clicked, changed, loaded, etc. There are different types of events including form events (like onblur, onchange), keyboard events (like onkeypress), and mouse events (like onclick, ondblclick). Each event triggers a specific piece of JavaScript code, allowing dynamic and interactive behaviors in a web page.

Uploaded by

Nakul Bhar
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
40 views

Java Script L20

JavaScript can execute code in response to events in an HTML document, such as when an element is clicked, changed, loaded, etc. There are different types of events including form events (like onblur, onchange), keyboard events (like onkeypress), and mouse events (like onclick, ondblclick). Each event triggers a specific piece of JavaScript code, allowing dynamic and interactive behaviors in a web page.

Uploaded by

Nakul Bhar
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 21

JavaScript 

Events
• HTML events are "things" that happen to HTML elements.
• When JavaScript is used in HTML pages, JavaScript
can "react" on these events.
• An HTML event can be something the browser does, or
something a user does.
• JavaScript lets you execute code when events are detected.
• 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
Types of Events
• Form Events
• Keyboard Events
• Mouse Events
Form Events
• onblur Event attribute
• onchange Event Attribute
• onfocus Event Attribute
• oninput Event Attribute
• oninvalid Event Attribute
• onreset Event Attribute
• onselect Event Attribute
• onsubmit Event Attribute
onblur Event attribute
<!DOCTYPE html>
<html>
<body>

Enter your name: <input type="text" name="fname" id="fname" onblur="myFunction()">

<p>When you leave the input field, a function is triggered which transforms the input text to upper case.</p>

<script>
function myFunction() {
var x = document.getElementById("fname");
x.value = x.value.toUpperCase();
}
</script>

</body>
</html>
onchange Event Attribute
<!DOCTYPE html>
<html>
<body>

<p>Select a new car from the list.</p>

<select id="mySelect" onchange="myFunction()">


<option value="Audi">Audi
<option value="BMW">BMW
<option value="Mercedes">Mercedes
<option value="Volvo">Volvo
</select>

<p>When you select a new car, a function is triggered which outputs the value of the selected car.</p>

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

<script>
function myFunction() {
var x = document.getElementById("mySelect").value;
document.getElementById("demo").innerHTML = "You selected: " + x;
}
</script>

</body>
</html>
onfocus Event Attribute
<!DOCTYPE html>
<html>
<body>

<p>A function is triggered when one of the input fields get focus. The function changes the background-
color of the input field.</p>
First name: <input type="text" id="fname" onfocus="myFunction(this.id)"><br>
Last name: <input type="text" id="lname" onfocus="myFunction(this.id)">

<script>
function myFunction(x) {
document.getElementById(x).style.background = "yellow";
}
</script>

</body>
</html>
oninput Event Attribute
<!DOCTYPE html>
<html>
<body>

<p>Write something in the text field to trigger a function.</p>

<input type="text" id="myInput" oninput="myFunction()">

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

<script>
function myFunction() {
var x = document.getElementById("myInput").value;
document.getElementById("demo").innerHTML = "You wrote: " + x;
}
</script>

</body>
</html>
oninvalid Event Attribute
<!DOCTYPE html>
<html>
<body>

<form action="/action_page.php" method="get">


Name: <input type="text" oninvalid="alert('You must fill out the form!');" name="fname"
required>
<input type="submit" value="Submit">
</form>

<p>If you click submit, without filling out the text field, an alert message will occur.</p>

<p><strong>Note:</strong> The oninvalid event is not supported in Safari.</p>

</body>
</html>
onreset Event Attribute
<!DOCTYPE html>
<html>
<body>

<p>When you reset the form, a function is triggered which alerts some text.</p>

<form onreset="myFunction()">
Enter name: <input type="text">
<input type="reset">
</form>

<script>
function myFunction() {
alert("The form was reset");
}
</script>

</body>
</html>
onsearch Event Attribute
<!DOCTYPE html>
<html>
<body>

<p>Write something in the search field and press "ENTER".</p>

<input type="search" id="myInput" onsearch="myFunction()">

<p><strong>Note:</strong> The onsearch event is not supported in Internet Explorer, Firefox or Opera 12 and earlier versions.</p>

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

<script>
function myFunction() {
var x = document.getElementById("myInput");
document.getElementById("demo").innerHTML = "You are searching for: " + x.value;
}
</script>

</body>
</html>
onselect Event Attribute
<!DOCTYPE html>
<html>
<body>

Some text: <input type="text" value="Select me!!" onselect="myFunction()">

<p>The function myFunction() is triggered when some text is selected in the input field. The function
shows a message.</p>

<script>
function myFunction() {
alert("You have selected some text!");
}
</script>

</body>
</html>
onsubmit Event Attribute
<!DOCTYPE html>
<html>
<body>

<p>When you submit the form, a function is triggered which alerts some text.</p>

<form action="/action_page.php" onsubmit="myFunction()">


Enter name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>

<script>
function myFunction() {
alert("The form was submitted");
}
</script>

</body>
</html>
Keyboard Events
• onkeypress Event Attribute
• onkeyup Event Attribute
onkeypress Event Attribute
<!DOCTYPE html>
<html>
<body>

<p>A function is triggered when the user is pressing a key in the input field.</p>

<input type="text" onkeypress="myFunction()">

<script>
function myFunction() {
alert("You pressed a key inside the input field");
}
</script>

</body>
</html>
onkeyup Event Attribute
<!DOCTYPE html>
<html>
<body>

<p>A function is triggered when the user releases a key in the input field. The function transforms the
character to upper case.</p>
Enter your name: <input type="text" id="fname" onkeyup="myFunction()">

<script>
function myFunction() {
var x = document.getElementById("fname");
x.value = x.value.toUpperCase();
}
</script>

</body>
</html>
Mouse Events
• onclick Event Attribute
• ondblclick Event Attribute
• onmousedown Event Attribute
• onmousemove Event Attribute
• onwheel Event Attribute
onclick Event Attribute
<!DOCTYPE html>
<html>
<body>

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

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

<p>A function is triggered when the button is clicked. The function outputs some text in a p element with
id="demo".</p>

<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}
</script>

</body>
</html>
ondblclick Event Attribute
<!DOCTYPE html>
<html>
<body>

<button ondblclick="myFunction()">Double-click me</button>

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

<p>A function is triggered when the button is double-clicked. The function outputs some text in a p element with
id="demo".</p>

<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}
</script>

</body>
</html>
onmousedown Event Attribute
<!DOCTYPE html>
<html>
<body>

<p id="p1" onmousedown="mouseDown()" onmouseup="mouseUp()">


Click the text! The mouseDown() function is triggered when the mouse button is pressed down over this paragraph. The function sets
the color of the text to red. The mouseUp() function is triggered when the mouse button is released. The mouseUp() function sets
the color of the text to green.
</p>

<script>
function mouseDown() {
document.getElementById("p1").style.color = "red";
}

function mouseUp() {
document.getElementById("p1").style.color = "green";
}
</script>

</body>
</html>
onmousemove Event Attribute
<!DOCTYPE html>
<html>
<body>

<img onmousemove="bigImg(this)" onmouseout="normalImg(this)" border="0" src="smiley.gif" alt="Smiley" width="32" height="32">

<p>The function bigImg() is triggered when the user mouse pointer is moved over the image. This function enlarges the image.</p>
<p>The function normalImg() is triggered when the mouse pointer is moved out of the image. That function sets the height and width of the image back
to normal.</p>

<script>
function bigImg(x) {
x.style.height = "64px";
x.style.width = "64px";
}

function normalImg(x) {
x.style.height = "32px";
x.style.width = "32px";
}
</script>

</body>
</html>
onwheel Event Attribute
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
border: 1px solid red;
}
</style>
</head>
<body>

<div id="myDIV" onwheel="myFunction()">This example demonstrates how to assign an "onwheel" event event to a DIV element. Roll the mouse wheel over me -
either up or down!</div>

<p>A function is triggered when you roll the mouse wheel over div. The function sets the font-size of div to 35 pixels.</p>

<p><strong>Note:</strong> The onwheel event is not supported in Internet Explorer or Safari.</p>

<script>
function myFunction() {
document.getElementById("myDIV").style.fontSize = "35px";
}
</script>

</body>
</html>

You might also like