每次触发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. 《你不知道的JavaScript（中卷）》读书笔记

    中卷有点无聊,不过也是有干货的,但是好像要背一下的样子.不过作者大大都夸我是“优秀的开发人员”了,肯定要看完呀~~ 开发人员觉得它们太晦涩,很难掌握和运用,弊(导致bug)大于利(提高代码可读性).这 ...

  2. 纯 Html 5的 简单 TreeView 保存下思路以后有机会再完善。

    details p{margin-left:30px;}details.root details{margin-left:13px;} </style> <details class ...

  3. springBoot(6)---过滤器，监听器，拦截器

    过滤器,监听器,拦截器 一.理解它们 看里十几篇博客,总算有点小明白,总的来讲,两张图可以让我看明白点. 通过两幅图我们可以理解拦截器和过滤器的特点 1.过滤器 过滤器是在请求进入tomcat容器后, ...

  4. sql server I/O硬盘交互

    一. 概述 sql server作为关系型数据库,需要进行数据存储, 那在运行中就会不断的与硬盘进行读写交互.如果读写不能正确快速的完成,就会出现性能问题以及数据库损坏问题.下面讲讲引起I/O的产生, ...

  5. HttpContextAccessor不会出现线程同步问题？

    我有一段比较常规的.net core mvc代码,就是StartUp函数中注册HttpContextAccessor到系统DI工厂中,如图: 然后调用方是service层,这个service层是使用a ...

  6. [疑难杂症]__关于cmd命令正确而显示不是内部指令的错误(ps:已解决)

    前言 事情的起因是因为我在使用上网程序的时候,运行程序发现端口被占用,这个当然我们知道要将占用的端口结束掉就行,但是显然我们首先要找到占用窗口的程序是什么,才方便在任务管理器中找到并结束掉它. 查找了 ...

  7. 项目ITP(二) 二维码 拿起你的手机装一装，扫一扫 【每日一搏】

    前言 系列文章:[传送门] 五一,期待的两天假期.我的生日,happy. [吐槽] 学校真恶心,半月前让我给他搞个东西,md,课题不加人.后来又来求,说钱(钱,咱不需要:我猜也不多).到现在,又来了, ...

  8. 在SpringBoot中添加Redis

    前言 在实际的开发中,会有这样的场景.有一个微服务需要提供一个查询的服务,但是需要查询的数据库表的数据量十分庞大,查询所需要的时间很长. 此时就可以考虑在项目中加入缓存. 引入依赖 在maven项目中 ...

  9. nginx中root和alias的区别

    nginx中root和alias的区别    

  10. MySQL：测试题

    一,表关系的练习测试 请创建如下表关系,并建立相关约束 一,创建表结构数据: 创建的话肯定先创建没有关联的表,老师,课程(关联老师),年级,班级(关联年级),学生(关联班级), 班级任职表 (关联老师 ...