jQuery: Mouse events

This entry is part 9 of 33 in the series jQuery Tutorial

Ever hover your mouse over a line and found that the line color changed?

This can be done easily using jQuery.

<!doctype html>
<html>
<head>
    <title>hover demo</title>
    <script src='//code.jquery.com/jquery-1.10.2.js'></script>
    <style>
        ul {
            color: blue;
        }
    </style>
    <script>
        $(function () {
            $('li').mouseover(
                    function () {
                        $(this).css('color', 'red');
                    }
            );
            $('li').mouseout(
                    function () {
                        $(this).css('color', 'blue');
                    }
            )
        });
    </script>
</head>
<body>

<ul>
    <li>Milk</li>
    <li>Bread</li>
</ul>
</body>
</html>

Try The Code

With jQuery, it acts on the li element using $(‘li’).

It is also similar to writing jQuery(‘li’) where the $ is replaced by jQuery.

Here are other jQuery related mouse events.

Mouse EventDescription
.click()triggers an event when the mouse is clicked.
.dblclick()triggers an event when the mouse is double clicked.
.hover()event to be executed when the mouse pointer enters and leaves the elements.
.mousedown()Binds an event handler to the “mousedown”
.mouseenter()triggers an event when the mouse enters an element.
.mouseleave()event is fired when the mouse leaves an element.
.mousemove()Bind an event handler to the “mousemove” Javascript event.
.mouseout()Bind an event handler to the “mouseout” event.
.mouseover()When the mouse is over an element.
.mouseup()Fired on a mouseup event.
.toggle()Events to be executed on alternate clicks.

jQuery: Focus event

This entry is part 8 of 33 in the series jQuery Tutorial

There are a few other events that are commonly used in jQuery.

We look at an interesting event called focus.  Once you put the mouse into the textbox, the textbox will be put into focus.

<!doctype html>
<html>
<head>
    <title>focus demo</title>
    <script src='//code.jquery.com/jquery-1.10.2.js'></script>
    <style>
        span {
            display: none;
        }
    </style>
</head>
<body>

<p>Enter something: <input type='text'> <span>You are in focus</span></p>
<script>
    $('input').focus(function () {
        $('span').fadeIn(4000);
    });
</script>

</body>
</html>

Try The Code

We have an anonymous function in focus and after the cursor has entered the text box, the function is ran bringing the text box in focus.

Here, we also have some simple CSS code, display: none.  That means anything that is wrapped inside the <span> will not be shown when the page is loaded.

We use fadeIn(), which is an animation method in jQuery to bring out the the ‘You are in focus’ text.

The 4000 in fadeIn(4000) is the time required to show the text.  In this case, it is 4000ms.

jQuery: Events

This entry is part 7 of 33 in the series jQuery Tutorial

After selector, Event is the second most important component of jQuery.
We use a click event to illustrate jQuery event.

<!DOCTYPE html>
<html>
<head>
    <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
    <script>
        $(function () {
            $('p').click( function () {
                        $('p').css('background-color','yellow');
                    }
            )
        });
    </script>
</head>
<body>
<p>If you click me I will change</p>
</body>
</html>

Try The Code

Notice how we use the click event to act on <p> element.  We want the font color to change and so we put a function inside the click event.

Similar to .click, we use .css to change the background color of the font.

In jQuery, there is a this object that we use to refer to the current element that it is acting on.  In this example, the current element is <p>.

We can replace the p element with this object as below.

<!DOCTYPE html>
<html>
<head>
    <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
    <script>
        $(function () {
            $('p').click( function () {
                       $(this).css('background-color','yellow');
                    }
            )
        });
    </script>
</head>
<body>
<p>If you click me I will change</p>
</body>
</html>
Try The Code