黑马程序员技术交流社区

标题: 【上海校区】 jq中event.target和this的区别（主要是在防止事... [打印本页]

---

作者: 不二晨    时间: 2019-4-15 10:47
标题: 【上海校区】 jq中event.target和this的区别（主要是在防止事...

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

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

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

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

2.阻止事件冒泡

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

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2