<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .box1 {
            width: 200px;
            height: 200px;
            background-color: black;
        }
        .box2 {
            width: 100px;
            height: 100px;
            background-color: red;
        }
        .box3 {
            width: 50px;
            height: 50px;
            background-color: blue;
        }
    </style>
    <script type="text/javascript">

//案例中点击box3时：分别会出现以下情况

        // 使用target会弹出三次box3
        // 使用this会弹出box3 box2 box1(冒泡)
        window.onload = function () {
            var box1 = document.getElementsByClassName("box1")[0];
            var box2 = document.getElementsByClassName("box2")[0];
            var box3 = document.getElementsByClassName("box3")[0];
            box1.onclick = function (event) {
                event = event || window.event;  //估计是兼容性写法
                alert(event.target.className);  //event.target指向的是被触发事件（被点击）的对象
                // alert(this.className);   //this指向的是事件绑定的对象
            }
            box2.onclick = function (event) {
                event = event || window.event;
                alert(event.target.className);
                // alert(this.className);
            }
            box3.onclick = function (event) {
                event = event || window.event;
                alert(event.target.className);
                // alert(this.className);
            }
        }
        // 运行这个DEMO，在事件冒泡的背景下，点击box3，event.target.className为box3，之后冒泡的事件弹出的信息也为box3；
        // 这是因为event.target指向的是被触发事件（被点击）的对象（box3），仅通过box3触发了一次事件（点击），所以只弹出一次box3；
        // 而this.name则依次弹出的为box3，box3，box1，这是因为this指向的是事件绑定的对象，事件冒泡中连续触发了三次事件，这三次事件绑定的对象都不同。
        // 简单的说就是，你点击了box3，那么e.target就是box3；并且由于你点击了box3，通过点击box3冒泡触发了box1，box2，
        // 在box1和box2的事件中，e.target也是box3。但是this是谁，就和由谁触发了事件无关了。比如，无论是box2，还是box3触发了box1的事件，还是box1的事件根本没有被触发，box1的事件的this永远都是box1，忠心耿耿
        // ========================总结==========================
        // 1.this是Javascript语言的一个关键字。
        // 2.this代表函数运行时，自动生成的一个内部对象，只能在函数内部使用。
        // 3.event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
        // 4.this和event.target的区别：
        // js中事件是会冒泡的，所以this是可以变化的，但event.target不会变化（在事件触发时，只传递当前event对象的引用），它永远是直接接受事件的目标DOM元素；
        // 另外，this和event.target都是dom对象，如果要使用jquey中的方法可以将他们转换为jquery对象：$(this)和$(event.target);
    </script>
</head>
<body>
    <div class="box1">
        <div class="box2">
            <div class="box3">
            </div>
        </div>
    </div>
</body>
</html>

小结event.target与this的更多相关文章

  1. window.event.srcElement与window.event.target 触发事件的元素

    IE浏览器支持window.event.srcElement , 而firefox支持window.event.target:<input type="text" onblu ...

  2. jquery this 和 event.target 区别

    1.this和event.target的区别: js中事件是会冒泡的,所以this是可以变化的,但event.target不会变化,它永远是直接接受事件的目标DOM元素: 2.this和event.t ...

  3. Javascript中event.srcElement和event.target的区别

    event.srcElement 可以捕获当前事件作用的对象,如event.srcElement.tagName可以捕获活动标记名称.注意获取的标记都以大写表示,如"TD",&qu ...

  4. 【前端】event.target 和 event.currentTarget 的区别

    event.target 和 event.currentTarget 的区别 举例说明: <!DOCTYPE html> <html> <head> <tit ...

  5. event.target指向谁？

    学习中,有时遇到event.target,总是不明白为什么要用target,后来学习了下,大概了解了event.target到底指什么元素了,关于event和this的内容,下回再说: 先摆结论:ev ...

  6. js中event.target

    event.srcElement从字面上可以看出来有以下关键字:事件,源     他的意思就是:当前事件的源, 我们可以调用他的各种属性 就像:document.getElementById(&quo ...

  7. 捕获当前事件作用的对象event.target和event.srcElement

    语法: //返回事件的目标节点(触发该事件的节点). event.target //FF,Chrome event.srcElement //IE 栗子: var oDiv=document.getE ...

  8. js的event.srcElement与event.target（触发事件对象）

    IE下,event对象有srcElement属性,但是没有target属性; Firefox下,event对象有target属性,但是没有srcElement属性.但他们的作用是相当的,即: fire ...

  9. ie9及以下不兼容event.target.dataset对象

    ie9及以下不兼容event.target.dataset对象,请使用event.target.getAttribute('data-xxx')

随机推荐

  1. Elasticsearch 在地理信息空间索引的探索和演进

    vivo 互联网服务器团队- Shuai Guangying 本文梳理了Elasticsearch对于数值索引实现方案的升级和优化思考,从2015年至今数值索引的方案经历了多个版本的迭代,实现思路从最 ...

  2. BetterScroll源码阅读顺便学习TypeScript

    开头 TypeScript已经出来很多年了,现在用的人也越来越多,毋庸置疑,它会越来越流行,但是我还没有用过,因为首先是项目上不用,其次是我对强类型并不敏感,所以纯粹的光看文档看不了几分钟就心不在焉, ...

  3. 国外价值10K+美金的Python面试题，珍藏已久，含泪放了出来

    兄弟们,没吹牛皮,一哥们在国外面试的时候,就是要他做的这个,直接给他说,做出来了给你15K(单位是刀),做不出来就拜拜~ 大兄弟当时就不服了,这不是看不起我么,分分钟就给整完了~ 我上我也行系列: 唠 ...

  4. 训练一个图像分类器demo in PyTorch【学习笔记】

    [学习源]Tutorials > Deep Learning with PyTorch: A 60 Minute Blitz > Training a Classifier   本文相当于 ...

  5. [原创]移远RM500U-CN模组驱动移植

    1. 简介 中国广电正式放号了,为了支持广电700MHz的5G基站,需要换用新的5G模组.移远通信的RM500U模组正好可以满足我们的使用要求; 我们选用该模组的原因:双卡单待 支持SIM卡热插拔 支 ...

  6. 4 zookeeper集群和基本命令

    4 zookeeper集群和基本命令 集群思路:先搞定一台服务器,再克隆出两台,形成集群! 1 安装zookeeper 我们的zookeeper是安装在/opt目录下 2 配置服务器编号 在/opt/ ...

  7. 05 MySQL_主键约束

    主键约束 主键: 用于表示数据唯一性的字段称为主键: 约束:就是对表字段添加限制条件 主键约束:保证主键字段的值唯一且非空: - 格式 : create table t1(id int primary ...

  8. C++指针和结构体基础知识

    学习C++首先要回忆起C语言当中的指针和结构体知识,本文作者将通过一段代码来总结指针和结构体基础知识:指针是一个变量,其值为另一个变量的地址,即,内存位置的直接地址.就像其他变量或常量一样,您必须在使 ...

  9. Educational Codeforces Round 132 (C,D) 题解 cf#1709

    昨晚打了这把EDU,赛后看了dalao们的C题代码豁然开朗恍然大悟 实在是太巧妙了 这场来说,D题的通过率比C题高太多了(估计很多人都在C题卡了然后没做D 先放题目链接 题目链接 C - Recove ...

  10. PKUSC 2022 口胡题解

    \(PKUSC\ 2022\)口胡题解 为了更好的在考试中拿分,我准备学习基础日麻知识(为什么每年都考麻将 啊啊啊) 首先\(STO\)吉老师\(ORZ,\)真的学到了好多 观察标签发现,这套题覆盖知 ...