每次触发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. pickle模块及其API

    模块:pickle 所包含API列表: pickle.dumps : 把任意对象序列化成一个bytes pickle.dump : 直接把对象序列化后写入一个file-like Object pick ...

  2. 运维笔记--docker高效查看后台日志

    场景描述: 应用程序运行在 Docker环境中,经常使用的查看后台日志的命令是:docker attach 容器名该命令优点:实时输出:不足之处:日志大量输出的时候,屏幕一闪而过,不便于调试,并且有一 ...

  3. MySQL(5)---锁

    锁 一概述 数据库锁定机制简单来说,就是数据库为了保证数据的一致性,而使各种共享资源在被并发访问变得有序所设计的一种规则.对于任何一种数据库来说都需要有相应的锁定机制. MySQL各存储引擎使用了三种 ...

  4. 一个前端开发者换电脑的过程（node & 淘宝镜像篇）

    当然,在我们安装了git和vscode之后,我们这个项目,在本地仍然是跑不起来的对吗?这句“npm run dev”就提示着我们需要有一个npm,npm是一个很强大的包管理工具,就像是安卓的应用商店, ...

  5. 在vue中使用Autoprefixed

    为了使我们的项目兼容各种浏览器,我们可能会在开发中写大量的前缀.即使有了IDE为我们提供了便捷的方式.但是仍然需要我们去花时间和精力.而这样会浪费我们很多的时间.为了在开发中提升团队的开发效率,并且同 ...

  6. Java设计模式之《构建者模式》及应用场景

    原创作品,可以转载,但是请标注出处地址:http://www.cnblogs.com/V1haoge/p/6553374.html 构建者模式,又称建造者模式,将一部负责对象的构建分为许多小对象的构建 ...

  7. 翻译：SET PASSWORD语句（已提交到MariaDB官方手册）

    本文为mariadb官方手册:SET PASSWORD的译文. 原文:https://mariadb.com/kb/en/library/set-password/我提交到MariaDB官方手册的译文 ...

  8. Linux文件权限与属性详解 之 su & sudo

    Linux文件权限与属性详解 之 一般权限 Linux文件权限与属性详解 之 ACL Linux文件权限与属性详解 之 SUID.SGID & SBIT Linux文件权限与属性详解 之 ch ...

  9. 学会这个删库再也不用跑路了~ --技术流ken

    前言 相信每一个学IT的人或多或少都听说过从删库到跑路这个梗~下图也是在各种交流群屡禁不止,新人听着也是瑟瑟发抖. 人们茶余饭后,街头巷角难免要问... 下面技术流ken就教给各位新手们一招删库再也不 ...

  10. Linux命令-基本变量类型及其运算

    [root@Redis01 ~]# cd /install/[root@Redis01 install]# mkdir -p test && cd test -s修改时间:[root@ ...