click、onclick、on事件执行优先级_onclick click on-优快云博客

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

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

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

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

代码如下：

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

JS：

$(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");
    });
});