Scribd
Upload
46 views3 pages

JS Events

The document discusses different JavaScript events: - onblur triggers when an object loses focus - onchange triggers when the content of a field changes - onclick triggers when an object is clicked - ondblclick triggers when an object is double clicked - onfocus triggers when an object gains focus - onkeydown triggers when a keyboard key is pressed Examples are provided for each event to demonstrate how JavaScript code can be executed in response to the event. The examples typically copy or modify the content of HTML form elements like text inputs when the corresponding event occurs.

Uploaded by

booboo
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
46 views3 pages

JS Events

The document discusses different JavaScript events: - onblur triggers when an object loses focus - onchange triggers when the content of a field changes - onclick triggers when an object is clicked - ondblclick triggers when an object is double clicked - onfocus triggers when an object gains focus - onkeydown triggers when a keyboard key is pressed Examples are provided for each event to demonstrate how JavaScript code can be executed in response to the event. The examples typically copy or modify the content of HTML form elements like text inputs when the corresponding event occurs.

Uploaded by

booboo
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 3

Event Object

Events are actions that can be detected by JavaScript, and the event object gives information about the event
that has occurred.

Sometimes we want to execute a JavaScript when an event occurs, such as when a user clicks a button.

Events are normally used in combination with functions, and the function will not be executed before the event
occurs!

onblur Event
The onblur event occurs when an object loses focus.

Example
Example

In this example we will execute some JavaScript code when a user leaves an input field:

<html>
<head>
<script type="text/javascript">
function upperCase()
{
var x=document.getElementById("fname").value
document.getElementById("fname").value=x.toUpperCase()
}
</script>
</head>
<body>

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

</body>
</html>

onchange Event
The onchange event occurs when the content of a field changes.

Example
Example

In this example we will execute some JavaScript code when a user changes the content of an input field:

<html>
<head>
<script type="text/javascript">
function upperCase(x)
{
var y=document.getElementById(x).value
document.getElementById(x).value=y.toUpperCase()
}
</script>
</head>
<body>

Enter your name:


<input type="text" id="fname"
onchange="upperCase(this.id)">

</body>
</html>

onclick Event
The onclick event occurs when an object gets clicked.

Example
Example

In this example the text in the first input field will be copied to the second input field when a button is
clicked:

<html>
<body>

Field1: <input type="text" id="field1" value="Hello World!">


<br />
Field2: <input type="text" id="field2">
<br /><br />
Click the button below to copy the content of Field1 to Field2.
<br />
<button onclick="document.getElementById('field2').value=
document.getElementById('field1').value">Copy Text</button>

</body>
</html>

ondblclick Event
The ondblclick event occurs when an object gets double-clicked.

Example
Example
In this example the second field changes according to the first field when you double-click on the button:

<html>
<body>

Field1: <input type="text" id="field1" value="Hello World!">


<br />
Field2: <input type="text" id="field2">
<br /><br />
Click the button below to copy the content of Field1 to Field2.
<br />
<button ondblclick="document.getElementById('field2').value=
document.getElementById('field1').value">Copy Text</button>

</body>
</html>

onfocus Event
The onfocus event occurs when an object gets focus.

Example
Example

In this example the background color of the input fields change when they get focus:

<html>
<head>
<script type="text/javascript">
function setStyle(x)
{
document.getElementById(x).style.background="yellow"
}
</script>
</head>
<body>

First name: <input type="text"


onfocus="setStyle(this.id)" id="fname">
<br />
Last name: <input type="text"
onfocus="setStyle(this.id)" id="lname">

</body>
</html>

onkeydown Event
The onkeydown event occurs when a keyboard key is pressed.

You might also like