What is the sequence of jQuery events triggered?

jQueryWeb DevelopmentFront End Technology

The jQuery event handlers always execute in the order they were bound. With jQuery, you can also change the sequence. Let’s see how, for example, from

demo(1);
demo(2);

We can change the sequence to −

demo(2);
demo(1);

Example

You can try to run the following to learn and change the sequence of jQuery events −

Live Demo

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $.fn.bindFirst = function(name, fn) {

        this.on(name, fn);
        this.each(function() {
            var handlers = $._data(this, 'events')[name.split('.')[0]];
            var handler = handlers.pop();
            handlers.splice(0, 0, handler);
        });
    };

    $("div").click(function() { alert("1"); });
    $("div").click(function() { alert("2"); });
    $("div").click(function() { alert("3"); });
    $("div").click(function() { alert("4"); });  
    $("div").bindFirst('click', function() { alert("5"); });

});
</script>
</head>
<style>    
.demo {
    cursor: pointer;
    border: 3px solid #FF0000;    
}
</style>
<body>

<h1>Heading 1</h1>
<div class="demo">
Click here for sequence.<br>
The sequence will be: 5, 1, 2, 3, 4
</div>

</body>
</html>
raja
Published on 20-Dec-2017 13:16:01
Advertisements