Scribd
Upload
8 views

Javascript Event

Uploaded by

s71165271
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
8 views

Javascript Event

Uploaded by

s71165271
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 15

JavaScript HTML DOM Events

Input Events
onblur - When a user leaves an input field
onchange - When a user changes the content of an input field
onchange - When a user selects a dropdown value
onfocus - When an input field gets focus
onselect - When input text is selected
onsubmit - When a user clicks the submit button
onreset - When a user clicks the reset button
onkeydown - When a user is pressing/holding down a key
onkeypress - When a user is pressing/holding down a key
onkeyup - When the user releases a key
onkeyup - When the user releases a key
onkeydown vs onkeyup - Both
Mouse Events
onmouseover/onmouseout - When the mouse passes over an
element
onmousedown/onmouseup - When pressing/releasing a mouse
button
onmousedown - When mouse is clicked: Alert which element
onmousedown - When mouse is clicked: Alert which button
onmousemove/onmouseout - When moving the mouse pointer
over/out of an image
onmouseover/onmouseout - When moving the mouse over/out
of an image
onmouseover an image map
Click Events
Acting to the onclick event
onclick - When button is clicked
ondblclick - When a text is double-clicked
1
Load Events
onload - When the page has been loaded
onload - When an image has been loaded
onerror - When an error occurs when loading an image
onunload - When the browser closes the document
onresize - When the browser window is resized
Others
What is the keycode of the key pressed?
What are the coordinates of the cursor?
What are the coordinates of the cursor, relative to the screen?
Was the shift key pressed?
Which event type occurred?

Input Events
(1) onfocus - When an input field gets focus
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction(x) {
x.style.background = "yellow";
}
</script>
</head>
2
<body>

Enter your name: <input type="text"


onfocus="myFunction(this)">

<p>When the input field gets focus, a function is triggered


which changes the background-color.</p>

</body>
</html>

(2) onselect - When input text is selected


<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "You
selected some text";
}
</script>
3
</head>
<body>

Some text: <input type="text" value="Hello world!"


onselect="myFunction()">

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

</body>
</html>

Mouse Events
(1) onmouseover/onmouseout - When the mouse passes
over an element
<!DOCTYPE html>
<html>
<body>

<h1 onmouseover="style.color='red'"
onmouseout="style.color='black'">Mouse over this text</h1>

4
</body>
</html>

(2)

Click Events

(1) ondblclick - When a text is double-clicked


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

5
<p ondblclick="myFunction()">Doubleclick this paragraph to
trigger a function.</p>

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

</body>
</html>

(2)

Load Events
(1) onload - When the page has been loaded
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
alert("Page is loaded");
}
</script>
</head>
6
<body onload="myFunction()">
<h2>Hello World!</h2>
</body>

</html>

(2)
Others events

(1) What is the keycode of the key pressed?


<html>
<head>
<script>
function whichButton(event) {
document.getElementById("demo").innerHTML =
event.keyCode;
}
</script>
</head>

7
<body onkeyup="whichButton(event)">

<p><b>Note:</b> Make sure the right frame has focus when


trying this example!</p>

<p>Click on this page, and press a key on your keyboard.</p>

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

</body>
</html>

Example:
<!DOCTYPE html>
<html>
<head>
<script>
function displayDate()
{
document.getElementById("demo").innerHTML = Date();

8
}
</script>
</head>
<body>

<h2>My First JavaScript</h2>


<p id="demo">This is a paragraph.</p>

<button type="button" onclick="displayDate()">Display


Date</button>

</body>
</html>

Example:
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
document.getElementById("demo").innerHTML = "Hello World";

9
}
</script>
</head>
<body>

<p>Click the button to trigger a function.</p>

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

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

</body>
</html>

Example
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
10
document.getElementById("demo").innerHTML = "Hello World";
}
</script>
</head>
<body>

<p ondblclick="myFunction()">Doubleclick this paragraph to trigger


a function.</p>

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

</body>
</html>

Example
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
alert("Page is loaded");

11
}
</script>
</head>

<body onload="myFunction()">
<h2>Hello World!</h2>
</body>

</html>

Example
<!DOCTYPE html>
<html>
<head>
<script>
function loadImage()
{
alert("Image is loaded");
}
</script>
</head>
<body>
12
<img src="w3javascript.gif" onload="loadImage()" width="100"
height="132">

</body>
</html>

Example
<!DOCTYPE html>
<html>
<head>
<script>
function imgError() {
alert('The image could not be loaded.');
}
</script>
</head>
<body>

<img src="image.gif" onerror="imgError()">

13
<p>A function is triggered if an error occurs when loading the image.
The function shows an alert box with a text.
In this example we refer to an image that does not exist, therefore the
onerror event occurs.</p>

</body>
</html>

Example
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
var w = window.outerWidth;
var h = window.outerHeight;
var txt = "Window size: width=" + w + ", height=" + h;
document.getElementById("demo").innerHTML = txt;
}
</script>
</head>

14
<body onresize="myFunction()">

<p>Try to resize the browser window.</p>

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

<p>Note: this example will not work properly in IE8 and earlier. IE8
and earlier do not support the outerWidth/outerHeight propery of the
window object.</p>

</body>

</html>

15

You might also like