jQuery中event.target和this的区别——冒泡

为什么会区分event.target 和 this ,

根本原因是，

js事件会冒泡，this是会改变的，而event.target是不会改变的，是谁调用，就指向触发事件的DOM元素本身

举个栗子，比如div元素里面有一个span元素，想要点击谁，谁背景颜色就变成橘色，那么我们肯一般会简单直接写成

$("div, input").click(function () {
$(this).css("background-color", "orange");
});

事实上因为js冒泡机制，最终实现的效果是点击内部span元素的时候，外面的div元素 也 变成了橘色

所以这时需要阻止冒泡

方法一：使用event.target

$("div, input").click(function (event) {
$(event.target).css("background-color", "orange");
});

延伸：

if (event.target == this){
doSometing();
}

方法二：直接返回扔掉

$("div, input").click(function (event) {
$(this).css("background-color", "orange");
return false;
});

方法三：使用event.stopPropagation();

$("div, input").click(function (event) {
$(this).css("background-color", "orange");
event.stopPropagation();
});