每次触发DOM事件时会产生一个事件对象（也称event对象），此处的参数e接收事件对象。而事件对象也有很多属性和方法，其中target属性是获取触发事件对象的目标，也就是绑定事件的元素，e.target表示该DOM元素，然后在获取其相应的属性值。

this和event.target的区别：

js中事件是会冒泡的，所以this是可以变化的，但event.target不会变化，它永远是直接接受事件的目标DOM元素；

.this和event.target都是dom对象

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>e.target</title>
    <script src="js/jquery-1.11.3.js"></script>
</head>
<body>
<div id="temp"></div>
<ul class="JQ-content-box" style="padding:20px; background:#FFFFFF">
    <li>第一行
        <ul>
            <li>这是公告标题1</li>
            <li>这是公告标题2</li>
            <li>这是公告标题3</li>
            <li>这是公告标题4</li>
        </ul>
    </li>
</ul>
<script>
    $(function(){
        $("li").on("click",function(e){
            console.log(e.target);
            console.log(this);
            $("#temp").html("clicked: " + e.target.nodeName);
            $(e.target).css("color","#FF3300");
        })
    });
</script>
</body>
</html>

this和e.target的异同的更多相关文章

  1. Spring AOP切点表达式用法总结

    1. 简介        面向对象编程,也称为OOP(即Object Oriented Programming)最大的优点在于能够将业务模块进行封装,从而达到功能复用的目的.通过面向对象编程,不同的模 ...

  2. 三言两语之js事件、事件流以及target、currentTarget、this那些事

    厉害了我的哥--你是如此简单我却将你给遗忘   放假前再看某文档,里边提到两个我既熟悉又陌生的概念target.currentTarget,说他熟悉我曾经看到过这两个事件对象的异同处,说他陌生吧?很不 ...

  3. AS3中 Event 类的target和currentTarget属性

    在事件处理过程中,会自动生成事件类的实例,并传给侦听器函数.通过这个参数就可以使用事件类的属性和方法.其中target与currentTarget属性是两个很相似的属性. 对于简单的事件处理过程,分清 ...

  4. vue 和 react 学习 异同点

    vue 和 react 学习 异同点 本文不做两个框架比较,只对比了两个框架的语法对比,不代表任何观点,盗版必究,本人唯一qq:421217189 欢迎大家一起来学习探讨,壮我大前端(本文markdo ...

  5. 伪元素:target

    :target 伪类选择器 :target 是 CSS3 新增的一个伪类,可用于选取当前活动的目标元素.当 URL 末尾带有锚名称 #,就可以指向文档内某个具体的元素.这个被链接的元素就是目标元素(t ...

  6. 多个Target的使用

    背景介绍 开发过程中,我们会在内网搭建一个测试服务器,开发.测试都是在内网进行的.这样产生脏数据不会影响外网的服务器.外网服务器只有最后发布时才会进行一些必要的测试. 还有就是要对同一份代码生成不同的 ...

  7. PHP中Cookie与Session的异同以及使用

    Cookie与Session的异同: 一.cookie机制 Cookies是服务器在本地机器上存储的小段文本并随每一个请求发送至同一个服务器.IETF RFC 2965 HTTP State Mana ...

  8. Java 堆内存与栈内存异同(Java Heap Memory vs Stack Memory Difference)

    --reference Java Heap Memory vs Stack Memory Difference 在数据结构中,堆和栈可以说是两种最基础的数据结构,而Java中的栈内存空间和堆内存空间有 ...

  9. MySQL中You can't specify target table for update in FROM clause一场

    mysql中You can't specify target table <tbl> for update in FROM clause错误的意思是说,不能先select出同一表中的某些值 ...

随机推荐

  1. Jquery百宝箱

    引入jquery <script src="https://blog-static.cnblogs.com/files/dongxiaodong/jquery-3.3.1.min.js ...

  2. 使用.NET Hardware Intrinsics API加速机器学习场景

    ML.NET 0.6版本刚刚发布不久,我们知道ML.NET代码已经依赖于使用本机代码库的性能矢量化.这是一个重新实现托管代码中现有代码库的机会,使用.NET Hardware Intrinsics进行 ...

  3. 全网最全最详细的Windows下安装Anaconda2 / Anaconda3（图文详解）

    不多说,直接上干货! 说明: Anaconda2-5.0.0-Windows-x86_64.exe安装下来,默认的Python2.7 Anaconda3-4.2.0-Windows-x86_64.ex ...

  4. 纸上谈兵: AVL树[转]

    作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! 二叉搜索树的深度与搜索效率 我们在树, 二叉树, 二叉搜索树中提到,一个有n个节点 ...

  5. 开源任务调度平台elastic-job-lite源码解析

    前段时间写过一遍文章<一文揭秘定时任务调度框架quartz>,有读者建议我再讲讲elastic-job这个任务调度框架,年末没有那么忙,就来学习一下elastic-job. 首先一点,el ...

  6. .NET ThreadPool算法

    .NET ThreadPool相关算法记录 1.ManagedThreadPool (corefx) .net4.0之前只有全局队列,为了解决全局队列多线程竞争使用问题,引入work-stealing ...

  7. 视频人脸检测——Dlib版（六）

    往期目录 视频人脸检测--Dlib版(六) OpenCV添加中文(五) 图片人脸检测--Dlib版(四) 视频人脸检测--OpenCV版(三) 图片人脸检测--OpenCV版(二) OpenCV环境搭 ...

  8. 翻译：select into outfile(已提交到MariaDB官方手册)

    本文为mariadb官方手册:SELECT INTO OUTFILE的译文. 原文:https://mariadb.com/kb/en/select-into-outfile/ 我提交到MariaDB ...

  9. ERP，ARP瘦身并如何删除。

    ERP,ARP瘦身 场景:由于ARP,ERP运行近10年,日志文件多而杂.清理ERP的日志文件有利于ERP的迁移. 1)ERP的相关日志文件如下: /ora1159/prod/prodcomn/adm ...

  10. [转]Rancher 快速上手指南操作(1)

    本文转自:http://www.cppblog.com/zhiyewang/archive/2016/03/17/213053.aspx Rancher 快速上手指南操作(1)该指南知道用户如何快速的 ...