jquery中.on()方法指定子元素和不指定子元素的区别

首先来看下这两种情况下的输出：

<div class="parent">
    <div class="father">
        <div class="son">测试.on()方法</div>
    </div>
</parent>

情况一：

$(".parent .father").on("click", function(){
    console.log("父元素被点击");
});
$(".parent .son").on("click", function(){
    console.log("子元素被点击");
});

情况一：

$(".parent .father").on("click", function(){
    console.log("父元素被点击");
});
$(".parent").on("click", ".son", function(){
    console.log("子元素被点击");
});

这两种情况的输出分别为：
情况一：

子元素被点击
父元素被点击

情况二：

父元素被点击
子元素被点击

为什么两个等价的代码，输出结果却不同呢？
原因在于，.son的click事件绑定的位置不同：

$(".parent .son").on("click", function(){
    console.log("子元素被点击");
});

这行代码是将点击事件绑定在.son元素上，而.son是.father的子元素

而

$(".parent .son").on("click", function(){
    console.log("子元素被点击");
});

这行代码虽然触发的都是.son上的点击事件，但是该点击事件绑定在了.parent元素上，而.parent是.father的父元素