Scribd
Upload
23 views

Practical No 8css

Uploaded by

sarthi1505
Copyright
© © All Rights Reserved
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
23 views

Practical No 8css

Uploaded by

sarthi1505
Copyright
© © All Rights Reserved
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/ 6

Practical No.

8:
Create a webpage to implement Form Events. Part-II. Mouse

Event:
Mouse Event are used to capture the interaction made by the user by using mouse.
Attribute Value Description
onclick script Fires on a mouse click on the element
ondblclick script Fires on a mouse double-click on the element
onmousedown script Fires when a mouse button is pressed down on an element
onmousemove script Fires when the mouse pointer is moving while it is over an

element

onmouseout script Fires when the mouse pointer moves out of an element
onmouseover script Fires when the mouse pointer moves over an element
onmouseup script Fires when a mouse button is released over an element
onmousewheel script Deprecated. Use the onwheel attribute instead
onwheel script Fires when the mouse wheel rolls up or down over an element

1. Mousedown, mouseup, click:


If the user clicks on an element no less than three mouse events fire, in this order:
1. mousedown, user depresses the mouse button on this element
2. mouseup, user releases the mouse button on this element
3. click, one mousedown and one mouseup detected on this element
2. Dblclick:
The dblclick event is rarely used. Even when you use it, you should be sure never to register
both an
onclick and an ondblclick event handler on the same HTML element. Finding out what the
user has
actually done is nearly impossible if you register both.

3. Mousemove:
The mousemove event works fine, but you should be aware that it may take quite some
system time
to process all mousemove events. If the user moves the mouse one pixel, the mousemove
event
fires. Even when nothing actually happens, long and complicated functions take time and
this may
affect the usability of the site: everything goes very slowly, especially on old computers.
4. Mousing out of a layer:
In a layer-based navigation you may need to know when the mouse leaves a layer so that it
can be
closed. Therefore you register an onmouseout event handler to the layer. However, event
bubbling
causes this event handler to fire when the mouse leaves any element inside the layer, too.
5. Mouseover and mouseout:
Take another look at the example, switch the mouseovers on and try them. The example
adds an
onmouseover event handler to ev3 only. However, you’ll notice that a mouseover event
takes place
not only when the mouse enters ev3's area, but also when it enters the area of ev4 or the
span. In
Mozilla before 1.3, the event even fires when the mouse enters the area of a text!
The reason for this is of course event bubbling. The user causes a mouseover event on ev4.
There is
no onmouseover event handler on this element, but there is one on ev3. As soon as the
event has
bubbled up to this element, the event handler is executed.
6. Mouseenter and mouseleave:
Microsoft has another solution. It has created two new events mouseenter and mouseleave.
They are
almost the same as mouseover and mouseout except that they don’t react to event bubbling.
Therefore they see the entire HTML element they’re registered to as one solid block and
don’t react
to mouseovers and –outs taking place inside the block.

Key Events:
Key Event are used to capture the interaction made by the user by usingkey.
Attribute Value Description
onkeydown script Fires when a user is pressing a key
onkeypress script Fires when a user presses a key
onkeyup script Fires when a user releases a key

1. The Keydown Event (onkeydown):


The keydown event occurs when the user presses down a key on the keyboard. You can
handle the keydown event with the onkeydown event handler.
2. The Keyup Event (onkeyup):
The keyup event occurs when the user releases a key on the keyboard. You
can handle the keyup event with the onkeyup event handler.
3. The Keypress Event (onkeypress):
The keypress event occurs when a user presses down a key on the keyboard that has a
character value
associated with it. For example, keys like Ctrl, Shift, Alt, Esc, Arrow keys, etc. will not
generate a
keypress event, but will generate a keydown and keyup event.
Conclusion: We understand that how to create a webpage using form events.
JavaScript on mouse event handler.

<!DOCTYPE HTML>
<html>
<head>
<title>Example: Working with Mouse events</title>
<style>
body{font-family:Verdana; background:#44c767;
color:#fff;}
</style>
<script>
var count = 0; function /* initializes a counter to track the number of mouse movements over
a button.*/

tracker(){ count++; /* Increments the count and displays an alert with the updated count.*/

alert(count + " Mouse moves have been registered");


}
function popup1() /* Displays an alert when the mouse hovers over an element*/
{
alert("Event Registered : onMouseOver");
}
function popup2() {
alert("Event Registered : onMouseOut");
}
</script>
</head>
<body>
<p>Move the mouse over the link to trigger the event
<a href="#" onmouseover="popup1()"> onMouseOver</a></p> /* onmouseover event to
call popup1() */
<p>Move the mouse over the link to trigger the event
<a href="#" onmouseout="popup2()"> onMouseOver</a></p>
<p>Move the mouse over the button, it keeps a track of number of
times the mouse moves over the button</p>
<button onmouseover="tracker()">Move over this button </button> /* //onmouseover event
that triggers the tracker() function */
</body>
</html>

OUTPUT
JavaScript on Key event handler.
<!DOCTYPE HTML>
<html>
<head>
<title>Example: Working with form Events</title>
<style type="text/css">
p{font-family:Verdana;
background:#FA8B7C; /* Light pink background */
color:#fff; /* White text */
padding:10px; /* Padding inside paragraph */
border:4px solid #555;} /* Dark grey border */
</style>
</head>
<body>
<form>

<p>
<label for="name"> Subject Name:
<input autofocus id="name" name="name" /></label>
/*autofocus, meaning it will be focused when the page loads. */
</p>

<p>
<label for="nick"> Subject Abbrivation:
<input id="nick" name="nick" /></label>
</p>

<button type="submit">Submit</button>
</form>
<span id="output"></span>
</body>
<script>
var items = document.getElementsByTagName("input");
for(var i=0; i < items.length; i++) // Assign event handler to each input
{
items[i].onkeyup = keyboardEventHandler;
}
function keyboardEventHandler(e){
document.getElementById("output").innerHTML = "Key pressed is: " +
e.keyCode + " Char:" + String.fromCharCode(e.keyCode);
}
</script>
</html>

OUTPUT

You might also like