黑马程序员技术交流社区

标题: 【上海校区】jQuery中event.target和this的区别——冒泡 [打印本页]

---

作者: 不二晨    时间: 2019-4-15 10:49
标题: 【上海校区】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();
    });



---------------------
【转载，仅作分享，侵删】
作者：cysear
原文：https://blog.csdn.net/cysear/article/details/70225155
版权声明：本文为博主原创文章，转载请附上博文链接！

---

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

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