Scribd
Upload
7 views

CSS Practical No.8 Writeup & Program

The document provides an overview of mouse and key events in JavaScript, detailing various event handlers such as onclick, onmousedown, onkeydown, and onkeyup. It explains the order of events triggered by mouse actions and the differences between mouseover/mouseout and mouseenter/mouseleave. Additionally, it includes example HTML code demonstrating the implementation of these events in a webpage.

Uploaded by

Pratiksha Wagh
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
7 views

CSS Practical No.8 Writeup & Program

The document provides an overview of mouse and key events in JavaScript, detailing various event handlers such as onclick, onmousedown, onkeydown, and onkeyup. It explains the order of events triggered by mouse actions and the differences between mouseover/mouseout and mouseenter/mouseleave. Additionally, it includes example HTML code demonstrating the implementation of these events in a webpage.

Uploaded by

Pratiksha Wagh
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 7

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 using key.

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 tracker(){
count++;
alert(count + " Mouse moves have been registered");
}
function popup1() {
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>

<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>
</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;
color:#fff;
padding:10px; border:4px solid #555;}
</style>
</head>
<body>
<form>
<p>
<label for="name"> Subject Name:
<input autofocus id="name" name="name" /></label>
</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++){
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