每次触发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. PHP的会话控制

    页面数据的作用域: 当前页共享数据:变量.常量 两个页面间传递数据:get,post 跟踪用户的多页面数据共享(会话):session.cookie 全局数据共享:文件.数据库.memcached C ...

  2. Fiddler修改请求、返回数据

    相信你们有听过说“绕过前端”,但是可能想不到要怎样才能绕过前端呢? 首先,我们要知道什么是绕过前端?比如:登录用户名限制数字.6位,用户在登录页面填写用户名符合要求,使用Fiddler作为代理,拦截登 ...

  3. python中np.multiply（）、np.dot（）和星号（*）三种乘法运算的区别（转）

    为了区分三种乘法运算的规则,具体分析如下: import numpy as np 1. np.multiply()函数 函数作用 数组和矩阵对应位置相乘,输出与相乘数组/矩阵的大小一致 1.1数组场景 ...

  4. 解决关于 vue项目中 点击按钮路由多了个问号

    问题描述: 在vue项目开发过程中,点击按钮结果页面刷新了一遍 后来发现路径变成了 localhost:8080/?#/login 原因: 这里是 form 表单,点击了button 按钮,触发了他的 ...

  5. python不同开根号速度对比

    import time import math import numpy as np def timeit1(): s = time.time() for i in range(750000): z= ...

  6. final,finally,finalize有什么区别？String, StringBuffer, StringBuilder有什么区别？Exception和Error有什么区别？

    继上篇JVM学习之后,后面将分三期深入介绍剩余JAVA基础面试题,每期3题. 题目一.final,finally,finalize有什么区别? /*请尊重作者劳动成果,转载请标明原文链接:*/ /* ...

  7. [NewLife.XCode]高级查询（化繁为简、分页提升性能）

    NewLife.XCode是一个有10多年历史的开源数据中间件,支持nfx/netcore,由新生命团队(2002~2019)开发完成并维护至今,以下简称XCode. 整个系列教程会大量结合示例代码和 ...

  8. Spring Boot 系列（九）数据层-集成Spring-data-jpa

    实际开发中,不可避免地会对数据进行反复的增删改查操作,然而这部分工作是十分繁琐枯燥的.那么,随即而生的ORM框架就能很好的解决这个问题. 我们常用的ORM框架有:Hibernate.Mybatis.J ...

  9. MFC控件编程之组合框跟列表框

    MFC控件编程之组合框跟列表框 一丶简介 如果要使用组合框跟列表框.那么就要知道.组合框列表框是最核心的东西就是索引. 索引是从0开始的. 二丶组合框列表框常用的方法 AddString(字符串) 添 ...

  10. linux 两个查找工具 locate，find

    linux 中有很多查找工具,今天主要讲解locate,find两个工具. 一.locate 1.性能介绍 查询系统上预建的文件索引数据库 /var/lib/mlocate/mlocate.db 注意 ...