jq中event.target和this的区别（主要是在防止事件冒泡）

1.this是动态变化的，js事件冒泡时，this也会随着发生变化。事件冒泡先触发内部事件，由内到外的执行。

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

[javascript]  view plain  copy

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

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

2.阻止事件冒泡：

    

方法一：使用event.target

[javascript]  view plain  copy

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

延伸：

[javascript]  view plain  copy

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

方法二：直接返回扔掉

[javascript]  view plain  copy

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

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

[javascript]  view plain  copy

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