javascript 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.
javascript 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
Syntax
HTML allows event handler attributes, with JavaScript code,
to be added to HTML elements.
With single quotes:
<some-HTML-element some-event='some JavaScript'>
With double quotes:
<some-HTML-element some-event="some JavaScript">
onclick
Example1: Text Html
<button onclick="document.getElementById('demo').inner
HTML = Date()">The time is?</button>
Example2: Text Html
<button onclick="this.innerHTML = Date()">The time is?
</button>
Example3: Text Html
<button onclick="displayDate()">The time is?</button>
onchange
Example1: Text Html
<select onchange="myFunction()">
Example2: Text Html
<element onchange="myScript">
Example3: Text Html
<input type="text" onchange="myFunction()">
Onmouseover and out
Example1: Text Html
<img onmouseover="bigImg(this)" src="smiley.gif" alt="Smiley">
Example2: Text Html
<element onmouseover="myScript">
Example3: Text Html
<div onmousemove="myMoveFunction()">
<p id="demo">I will demonstrate onmousemove!</p>
</div>
<div onmouseenter="myEnterFunction()">
<p id="demo2">I will demonstrate onmouseenter!</p>
</div>
<div onmouseover="myOverFunction()">
<p id="demo3">I will demonstrate onmouseover!</p>
</div>
onkeydown
Example1: Text Html
<input type="text" onkeydown="myFunction()">
Example2: Text Html
<element onkeydown="myScript">
Example3: Text Html
<input type="text" onkeydown="keydownFunction()" o
nkeyup="keyupFunction()">
onkeypress
Example1: Text Html
<input type="text" onkeypress="myFunction()">
Example2: Text Html
<element onkeypress="myScript">
onkeyup
Example1: Text Html
<input type="text" onkeyup="myFunction()">
Example2: Text Html
<input type="text" onkeyup="myFunction()">
Example3: Text Html
Enter your name:
<input type="text" id="fname" onkeyup="myFunction()">
<script>
function myFunction() {
var x = document.getElementById("fname").value;
document.getElementById("demo").innerHTML = x;
}
</script>
onload
Example1: Text Html
<body onload="myFunction()">
Example2: Text Html
<element onload="myScript">
Example3: Text Html
<img src="w3javascript.gif" onload="loadImage()" width="100"
height="132">
<script>
function loadImage() {
alert("Image is loaded");
}
</script>
Thank you
