JavaScript Events Explained

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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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.
</p>
<script>
function mouseDown() {
document.getElementById("p1").style.color = "red";
}
function mouseUp() {
document.getElementById("p1").style.color = "green";
}
</script>

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">
<script>
function bigImg(x) {
x.style.height = "64px";
x.style.width = "64px";
}
function normalImg(x) {
x.style.height = "32px";
x.style.width = "32px";
}
</script>

onwheel Event Attribute
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
border: 1px solid black;
}
</style>
</head>
<body>
<div id="myDIV" onwheel="myFunction()">This example demonstrates
how to assign an "onwheel" event event to a DIV element. </div>
<script>
document.getElementById("myDIV").style.fontSize = "35px";
}
</script>

JavaScript Events Explained

Recomendados

Recomendados

Más contenido relacionado

Similar a JavaScript Events Explained

Similar a JavaScript Events Explained (20)

Último

Último (20)

JavaScript Events Explained