触发的 jQuery 事件的顺序是什么?


jQuery 事件处理程序始终按照它们被绑定的顺序执行。使用 jQuery,你还可以更改顺序。让我们来看看比如从

demo(1);
demo(2);

我们可以将顺序更改为 -

demo(2);
demo(1);

示例

你可以尝试运行以下内容来学习并更改 jQuery 事件的顺序 -

实际演示

<!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>

更新于: 2020-2-14

832 次浏览

开启你的 职业生涯

完成课程,获得认证

开始
广告