jQuery Events Handling



jQuery Event Model Benefits

Events notify a program that a user performed some type of action.

jQuery provides a cross-browser event model that works in IE, Chrome, Opera, FireFox, Safari and more. jQuery event model is simple to use and provides a compact syntax.

jQuery event methods

jQuery provides a number of shorthand methods, each of which corresponds to a native DOM event. In the following Table are listed the most useful jQuery events:

Event methods Description
click() Binds or Triggers the "click" event on an element
blur() Binds or Triggers the "blur" event on an element
focus() Binds or Triggers the "focus" event on an element
dblclick() Binds or Triggers the "dbclick" event on an element
mousedown() Binds or Triggers the "mousedown" event on an element
mouseup() Binds or Triggers the "mouseup" event on an element
mouseover() Binds or Triggers the "mouseover" event on an element
keydown() Binds or Triggers the "keydown" event on an element
keypress() Binds or Triggers the "keypress" event on an element

Handling jQuery click event

.click( handler(eventObject)) is used to listen for a click event or trigger a click event on an element.

The following code demonstrates the click event:

<body>
<form>
    <label for="FirstNameTextBox">First Name: </label>
    <input id="FirstNameTextBox" type="text" /><br />
    <label for="LastNametextBox">Last Name: </label>
    <input class="MyInput" id="LastNameTextBox" type="text" /><br />
    <td><input id="SubmitButton" type="button" value="Submit" />
    <span id="DivOutput"></span>
</form>   
    //USING CDN
<script src="https://code.jquery.com/jquery-3.4.1.min.js" </script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#SubmitButton').click(function () {
            var firstNameVal = $('#FirstNameTextBox').val();
            var lastNameVal = $('#LastNameTextBox').val();
            $('#DivOutput').text(firstNameVal + ' ' + lastNameVal);
        });
</script>
</body>

Using on()

.on(eventType, handler(eventObject)) attaches a handler to an event for the selected element.

The code below demonstrates the how to binding click event with on():

<script type="text/javascript">
    $(document).ready(function () {
        $('#MyDiv').on('click', function() {
            //Handle click event
        });
    });
</script>

Using off()

.off(event) is used to remove a handler previously bound to an element.

The code below demonstrates this:

<script type="text/javascript">
    $(document).ready(function () {
        $('#test').click(handler); //can be unbound using
        $("#test").off();
    });
</script>

Specific events can also be targeted using off():

<script type="text/javascript">
    $(document).ready(function () {
        $('#test').off('click');
    });
</script>

Binding Multiple Events with on()

on() allows multiple events to be bound to one or more elements Event names to bind are separated with a space:

<head>
    <style type="text/css">
        .Highlight { background-color:Yellow;}
    </style>
</head>
<body>
<div id="MyDiv">This is some text</div>  
    //USING CDN
<script src="https://code.jquery.com/jquery-3.4.1.min.js" </script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#MyDiv').on('mouseenter mouseleave mouseup', function (e) {
            $(this).toggleClass('Highlight');
            $(this).css('cursor', 'pointer');
            if (e.type == 'mouseup') {
                $(this).text('X: ' + e.pageX + ' Y: ' + e.pageY);
            }
        });
</script>
</body>

Handling hover events

Hover events can be handled using hover():

<script type="text/javascript">
    $(document).ready(function () {
        $(selector).hover(handlerIn, handlerOut)
            //handlerIn is equivalent to mouseenter 
            //handlerOut is equivalent to mouseleave
    });
</script>

Using hover()

The following code example highlights the element on mouseenter and sets it back to white on mouseleave.

<body>
<div id="target">This is some text</div>  
<script type="text/javascript">
    $(document).ready(function () {
        $('#target').hover( function(){ 
            $(this).css('background-color', '#00FF99'); 
        }, 
        function(){ 
            $(this).css('background-color', '#FFFFFF'); 
        });
    });
</script>
</body>

Ads Right