click、onclick、on事件执行优先级

本文通过实验对比了HTML元素上直接绑定的onclick事件、使用$().click绑定的事件以及使用$.on绑定的事件之间的触发顺序。得出结论:直接绑定的事件先于jQuery绑定的事件触发,且$.on绑定的事件总是最后触发。

按照事件冒泡的触发顺序,应该是我的事件先触发

结果不是这样的。我发现使用$().click(function(){})绑定的事件,而我使用$("body").on("click","",function(){})绑定的事件。

我希望比较一下它们的差别,专门写了一下代码,查看运行结果。

 

代码如下:

1
2
3
4
5
<div id="div_2" onclick="console.error('onclick_2')">
    <div id="div_1" onclick="console.error('onclick_1')">
        Click this Div
    </div>
</div>

JS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$(function(){
    $("body").on("click","#div_2",function(){
        console.error("on bind click 2");
    });
    $("body").on("click","#div_1",function(){
        console.error("on bind click 1");
    });
    $("#div_2").click(function(){
        console.error("click 2");
    });
    $("#div_1").click(function(){
        console.error("click 1");
    });
});

执行结果:

得到结论:

onclick,click,on()的优先关系:onclick>click>on();

onclick和click绑定的事件,彼此之间遵守事件冒泡规则,从内到外触发;

on()绑定的事件,总是晚于onclick和click绑定的事件触发;

由此可以得到,使用on()绑定的事件与onclick和click绑定的事件,判断触发先后顺序时,不能只考虑事件冒泡规则。

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值