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