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

this和event.target的区别：

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

.this和event.target都是dom对象

  1. <!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. conda添加多个版本的python

    在conda下,新添加一个python环境,如下再添加一个python3.6conda create --name py36 python=3.6然后通过source activate py36来激活 ...

  2. SQL中的Join和Where的区别

    一.sql语句中left join.inner join中的on与where的区别 0.各种join操作的概念和作用 left join :左连接,返回左表中所有的记录以及右表中连接字段相等的记录. ...

  3. InnoDB多版本

    InnoDB是一个多版本的存储引擎:为了支持事务的一些特性诸如并发和回滚,它保持着被修改行的旧版本信息.这些信息被存储在一个被叫做“回滚段”的表空间中(跟Oracle中的回滚段类似).InnoDB在回 ...

  4. java为什么用咖啡?

    2000年度的JavaOne国际会议大厅热闹非凡,一阵阵浓郁的咖啡味儿香气扑鼻.从世界各地汇集到旧金山参加会议的Java精英们兴奋异常,排着长队,等待得到一杯由Java语言控制的咖啡机煮制的免费咖啡. ...

  5. How Tomcat works — 三、tomcat启动（2）

    在了解了tomcat 的一些基本组件之后,学习启动过程就更容易理解了,因为启动过程就是启动各个组件. 目录 启动顺序 Bootstrap类 Catalina类 StandardServer类和Stan ...

  6. Java中的Interrupt使用

    初心 用interrupt中断程序 初步实现 public class InterruptionInJava implements Runnable{ @Override public void ru ...

  7. lucene-solr本地调试方法

    1.下载并编译lucene-solr的源代码,并导入 eclipse sts等 2.修改SolrDispatchFilter的solr.solr.home属性,我们这里将其直接修改为一个本地绝对路径, ...

  8. es6入门1-- let与var的区别详解

    一.前言 说到做到,现在暂时放了放JS模式的读书笔记,打算好好看看ES6,毕竟出了这么久了,还是靠JS吃饭的,都不好好学JS新特性,确实说不过去,我本来是想当读书笔记去记录ES6,但是这个确实是属于边 ...

  9. MyBatis源码解析（三）——Transaction事务模块

    原创作品,可以转载,但是请标注出处地址:http://www.cnblogs.com/V1haoge/p/6634151.html 1.回顾 之前介绍了Environment环境类,这其实是一个单例类 ...

  10. C# 获取当前屏幕的宽高和位置

    上一篇博客<C# 获取当前屏幕DPI>,介绍了如何获取当前屏幕的DPI设置 本章主要介绍如何获取当前窗口所在屏幕的信息 当前屏幕信息 如果当前是单屏幕,可以直接获取主屏幕 var prim ...