Scribd
Upload
83 views12 pages

Javascript Events

This document discusses JavaScript events. It provides examples of common HTML events like onclick, onchange, onmouseover and onload. It also demonstrates the syntax for adding event handler attributes to HTML elements and includes code examples for how to use different event types like onclick, onkeydown, onmouseover and onload.

Uploaded by

Tammaneni Navya
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
83 views12 pages

Javascript Events

This document discusses JavaScript events. It provides examples of common HTML events like onclick, onchange, onmouseover and onload. It also demonstrates the syntax for adding event handler attributes to HTML elements and includes code examples for how to use different event types like onclick, onkeydown, onmouseover and onload.

Uploaded by

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

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

You might also like