Keyboard and Mouse Events



Keyboard events

Keyboard events occur when keys are pressed on the keyboard. The keyboard events in following Table are available to be captured.

Event Description
keydown Raised when a key is pushed down
keyup Raised when a key is released
keypress Raised when a key is completely pressed

To filter out invalid characters from being entered into a text box you can listen for the keydown event on the text box and shows the keycode for the pressed key:

<body>
<div>
    <form>
        <h4>KEYDOWN CODE - CLICK ON INPUT TYPE AND PRESS KEYDOW AND KEYUP</h4>
        <label for="name">Name : </label>
        <input type="text" id="firstNameText" /> <br />
        <span id="outputText"></span>
    </form>
</div><br />
<!-- KEYWORD EVENT - KEYDOWN  -->
<script type="text/javascript">
    document.getElementById("firstNameText").addEventListener("keydown", function () {
        document.getElementById("outputText").innerHTML =
                               ("KEYDOWN CODE IS : " + window.event.keyCode);
    });
</script>
</body>

With keyboard events, extra properties are available on the event object to help out. For example, you might need to know whether the Shift key or Control key was also being pressed.

The following Table lists the event object properties for keyboard events.

Property Description
altKey A Boolean value to indicate whether the Alt key was pressed
keyCode The numeric code for the key that was pressed
ctrlKey A Boolean value as to whether the Control key was pressed
shiftKey A Boolean value as to whether the Shift key was pressed

You can use properties such as ctrlKey with the keyCode event to give the users something similar to hotkey functionality to automatically navigate the focus to specific fields.

The following code demostrates this:

<body>
<div>
    <form>
        <h4>PRESS F for FIRSTNAME AND L for LASTNAME</h4>
        <label for="name">Name : </label>
        <input type="text" id="firstName" /> <br />
        <label for="surname">Surname : </label>
        <input type="text" id="lastName" /><br />
    </form>
</div><br />
<!-- KEYWORD EVENT - ONKEYDOWN  -->
<script type="text/javascript">
    document.onkeydown = function () {
        if (window.event.ctrlKey && String.fromCharCode(window.event.keyCode) == 'F')
            document.getElementById("firstName").focus();
        if (window.event.ctrlKey && String.fromCharCode(window.event.keyCode) == 'L')
            document.getElementById("lastName").focus();
        return false;
    }
</script>
</body>

Mouse Events

The DOM provides extensive exposure to mouse activity through the mouse events. The Table below describes the available mouse events.

Event Description
click Raised when the mouse performs a click
dblclick Raised when the mouse performs a double-click
mousedown Raised when the mouse button is pressed down
mouseup Raised when the mouse button is released
mouseenter or mouseover Raised when the mouse cursor enters the space of an HTML element
mouseleave Raised when the mouse cursor leaves the space of an HTML element
mousemove Raised when the mouse cursor moves over an HTML element

The mouse events provide additional information on the event object. The Table below lists the applicable properties of the event object.

Event Description
clientX The x or horizontal position of the mouse cursor relative to the viewport boundaries
clientY The y or vertical position of the mouse cursor relative to the viewport boundaries
offsetX The x or horizontal position of the mouse cursor relative to the target element
offsetY The y or vertical position of the mouse cursor relative to the target element
screenX The x or horizontal position of the mouse cursor relative to the upper-left corner of the screen
screenY The y or vertical position of the mouse cursor relative to the upper-left corner of the screen

The following code assumes a div called yellowBox that raises its click event when the mouse clicks it.

<head>
<style type="text/css">
    #yellowBox {
        height: 80px;
        width: 80px;
        background-color: yellow;
    }
</style>
</head>
<body>
<div id="yellowBox"> </div>  
<input type="submit" onclick="coordinates()" value="ACTIVATE & CLICK YELLOW BOX" /><br/>
<!-- MOUSE EVENTS  -->
<script type="text/javascript">
    var coordinates = function () {
        document.getElementById("yellowBox").addEventListener("click", yellowBoxClick);
    }
    function yellowBoxClick() {
        alert("Client X: " + window.event.clientX + " ClientY: "
        + window.event.clientY);
        
        alert("offsetX: " + window.event.offsetX + " offsetY: "
        + window.event.offsetY);
        
        alert("screen X: " + window.event.screenX + " screenY: "
        + window.event.screenY);
    }
</script>
</body>

The mouseenter and mouseleave events indicate when the mouse cursor position has entered or left the area covered by a particular element, respectively.

The following code demonstrates applying a transformation on the mouseenter and removing it on the mouseleave:

<head>
<style type="text/css">
    .scale {
        transform: scale(1.5);
    }
    #greenBox{
        width:80px;
        height:80px;
        margin-left:35px; 
        background-color:green;
    }
</style>
</head>
<body>
<div id="greenBox">
<!-- MOUSE ENTER - MOUSE LEAVE -->
<script type="text/javascript">
    window.onload = function () {
        document.getElementById("greenBox").addEventListener("mouseenter",
        yellowBoxEnter);
        document.getElementById("greenBox").addEventListener("mouseleave",
        yellowBoxLeave);
    }
    function yellowBoxEnter() {
        this.classList.add("scale");
    }
    function yellowBoxLeave() {
        this.classList.remove("scale");
    }
</script> 
</body>

PROMOTIONS