Basics of Mouse Event Types

DOM Event Basics for HTML – Part 3

DOM for HTML

Foreword: In this part of the series, I talk about mouse event types.

By: Chrysanthus Date Published: 7 Jun 2015

Introduction

This is part 3 of my series, DOM Event Basics for HTML. In this part of the series, I talk about mouse event types. You should have read the different parts of the series before reaching here, as this is a continuation.

mouseenter
A browser MUST dispatch this event when a mouse pointer is moved onto the boundaries of an element or one of its descendent elements. If a descendant element exists, it should have the same boundary as the ancestor element. To try the following code, type it in the body element of an HTML document; load the page and then move the mouse pointer into the paragraph element.

    <p onmouseenter=evFn()>a paragraph</p>

    <script type="text/ecmascript">

        function evFn()
            {
                alert('mouse has entered');
            }

    </script>

onmouseover
A browser MUST dispatch this event when a mouse pointer is moved onto the boundaries of a descendant element. This event is similar to the mouseenter event but with the following difference: Here, the mouse pointer is moving into an element that is inside the ancestor element. It is the entering into the descendant element that triggers the event. To test the following code, move the mouse pointer into the paragraph element and then move it into the hyperlink element.

    <p>a paragraph <a href="" onmouseover=evFn()>link</a> a paragraph</p>

    <script type="text/ecmascript">

        function evFn()
            {
                alert('mouse is over');
            }

    </script>

onmouseleave
A browser MUST dispatch this event when a mouse pointer is moved off of the boundaries of an element and all of its descendent elements. If a descendant element exists, it has to have the same boundary as the ancestor element. To test the following code, move the mouse pointer into the paragraph element and then move it out of it.

    <p onmouseleave=evFn()>a paragraph</p>

    <script type="text/ecmascript">

        function evFn()
            {
                alert('mouse has left');
            }

    </script>

onmouseout
A browser MUST dispatch this event when a mousepointer is moved off of the boundaries of an element. This event type is similar to mouseleave, but with the following difference: the mouse pointer is moved out of a descendant element into an ancestor element. To test the following code, move the mouse pointer into the hyperlink element and then move it out of the hyperlink into the paragraph.

    <p>a paragraph <a href="" onmouseout=evFn()>link</a> a paragraph</p>

    <script type="text/ecmascript">

        function evFn()
            {
                alert('mouse is out');
            }

    </script>

onmousedown
A browser MUST dispatch this event when a mouse button is pressed over an element. To test the following code, press the left mouse button over the Form button.

    <form>
        <button onmousedown=evFn()>Do</button>
    </form>

    <script type="text/ecmascript">

        function evFn()
            {
                alert('mouse button has gone down');
            }

    </script>

onmouseup
A browser MUST dispatch this event when a mouse button is released over an element. To try the following code, press the left mouse button over the Form button and wait for some time before you release it. The response will be seen at the release time.

    <form>
        <button onmouseup=evFn()>Do</button>
    </form>

    <script type="text/ecmascript">

        function evFn()
            {
                alert('mouse button has been released');
            }

    </script>

onmousemove
The slightest movement of the mouse pointer is a mouse-move event. A browser MUST dispatch this event when a mouse pointer is moved while it is over an element. The frequency rate (number of times per second) of events fired while the mouse pointer is moved, depends on the browser, mouse and operating system. Multiple consecutive mousemove events SHOULD be fired for sustained mouse movement (in dragging for example), rather than a single event. To test the following code, move the mouse pointer over the first paragraph; and you will see the phrase, “mouse has moved” displayed continuously, one below the order.

    <p onmousemove=evFn()>a paragraph a paragraph</p>
    <p id='P1'></p>

    <script type="text/ecmascript">

        function evFn()
            {
                document.getElementById('P1').innerHTML += "mouse has moved <br>";
            }

    </script>

If you had tried the code, you would have appreciated the frequency at which the mousemove events are fired.

onclick
The click event MUST be dispatched on the topmost event target (element) indicated by the pointer, when the user presses down and releases the primary mouse button (left mouse button).

The following is the typical sequence of events when the primary mouse button is pressed and released over an element:

Event Name             Notes
1 onmousedown
2 onmousemove OPTIONAL (may not happen or may even be multiple events)
3 onmouseup
4 onclick

The onclick event is a particular event, but it normally goes with a sequence of events. The onclick event is an interpretation of the set of previous events. The interpretation is dispatched like other single events. The following code indicates the operation of the click event with its preceding events. To test the code, click the paragraph (you will see a lot of mouse move, as well as the expected events).

    <p onmousedown=evFn('down') onmousemove=evFn('move') onmouseup=evFn('up') onclick=evFn('cli')>a paragraph a paragraph</p>

    <p id='P1'></p>

    <script type="text/ecmascript">

        function evFn(ev)
            {
                if (ev=="down")
                    document.getElementById('P1').innerHTML += "button down <br>";
                if (ev=="move")
                    document.getElementById('P1').innerHTML += "pointer moved <br>";
                if (ev=="up")
                    document.getElementById('P1').innerHTML += "button up <br>";
                if (ev=="cli")
                    document.getElementById('P1').innerHTML += "element clicked <br>";
            }

    </script>

ondblclick
A browser MUST dispatch this event when the primary button of a mouse is clicked twice over an element. The following is the typical sequence of events when the primary mouse button is clicked twice (double-clicked):

Event Name             Notes
1 onmousedown
2 onmousemove OPTIONAL (may not happen or may even be multiple events)
3 onmouseup
4 onclick
5 onmousemove OPTIONAL
6 onmousedown
7 onmousemove OPTIONAL
8 onmouseup
9 onclick
10 ondblclick

The ondbclick event is an interpretation of a particular set of previous events. The interpretation is dispatched like other single events.

onmousewheel
The browser might be configured to associate vertical scrolling with rotation of the mouse wheel. A browser MUST dispatch this event when a mouse wheel has been rotated, or when an equivalent input device (such as a mouse-ball, certain tablets or touchpads, etc.) has emulated such an action.

That is it for this part of the series. We stop here and continue in the next part.

Chrys

Broad Network

Related Articles

Basics of Mouse Event Types

DOM Event Basics for HTML – Part 3

DOM for HTML

Introduction

Related Links

Comments