1 this与event.target

在编写事件函数时可以传入一个event参数，even参数可以使用一个target属性如even.target用以调用，其作用是指向返回事件的目标节点（触发该事件的节点），这与this是有区别的。 
在js中事件属性是会冒泡的，所以在这情况下，如果选用this，那么this是随时变化的，它指向的总是当前触发的事件，而even.target则是仅仅指向触发该事件的节点。

举例子说明：

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>e.target</title>

    <script src="jquery-3.2.1.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){

            alert('e.target'+e.target.innerText);

            alert('this'+this.innerText);

            $("#temp").html("clicked: " + e.target.nodeName);

            $(this).css("color","#FF3300");

            $(e.target).css("color",'blu');

        })

    });

</script>

</body>

</html>

上述的例子可以发现，绑定的事件是一个冒泡事件，即假如点击“公告标题”的li，它会先触发自身的click事件，然后因事件冒泡再触发因父元素也绑定的click事件。 
所以此时弹出的窗口共有4次，每两次为一组代表子元素与父元素，其中e.target一直指向触发该事件的节点，而this则随着事件的冒泡而不断变化。

注意：this与e.target是JavaScript对象，$(this)与$(e.target)是jQuery对象

2 data-*属性

很多时候想要一些节点与某些节点之间创建一些映射时，除了使用$(this).index()取出索引属性对二者进行比较外，还会使用到HTML5中的data-*属性，比方说在一个节点设定一个data-id="b"的属性，然后再想要映射的节点创建一个id="b"的属性，那么就可以使用data()方法建立映射，如：

var $a = $('#a');

var $b = $('#'+$a.data('id'));

关于this与e.target区别以及data-*属性的更多相关文章

  1. JS组件系列——使用HTML标签的data属性初始化JS组件

    前言:最近使用bootstrap组件的时候发现一个易用性问题,很多简单的组件初始化都需要在JS里面写很多的初始化代码,比如一个简单的select标签,因为仅仅只是需要从后台获取数据填充到option里 ...

  2. HTML data属性简介以及低版本浏览器兼容算法

    实例 使用 data-* 属性来嵌入自定义数据: <ul> <li data-animal-type="bird">Owl</li> <l ...

  3. vue笔记-模板,计算属性,class与style,data属性

    数据和方法 1:只有当实例被创建时 data 中存在的属性才是响应式的,也可以预定义一些空的属性,唯一的意外就是Object.freeze(obj),这会阻止修改现有的属性;也就是说一个数据在放到根实 ...

  4. Vue.js 源码分析(四) 基础篇 响应式原理 data属性

    官网对data属性的介绍如下: 意思就是:data保存着Vue实例里用到的数据,Vue会修改data里的每个属性的访问控制器属性,当访问每个属性时会访问对应的get方法,修改属性时会执行对应的set方 ...

  5. 【wpf】Path画扇形以及Path的Data属性的理解

    <Path x:Name="PathFillColor" Fill="{TemplateBinding Property=Button.Background}&qu ...

  6. data属性

    本框架内置组件以及部分插件可以通过data属性来初始化并使用,通常通过data-toggle来调用API(toggle是触发器的意思,例如我们创建一个navtab标签可以通过为a的data-toggl ...

  7. 23----2013.07.01---Div和Span区别,Css常用属性,选择器,使用css的方式,脱离文档流,div+css布局,盒子模型,框架,js基本介绍

    01 复习内容 复习之前的知识点 02演示VS创建元素 03div和span区别 通过display属性进行DIV与Span之间的转换.div->span 设置display:inline   ...

  8. HTML 5：你必须知道的data属性

    原文:All You Need to Know About the HTML5 Data Attribute 译文:你必须知道HTML 5 的Data属性 译者:dwqs HTML 5的Data属性可 ...

  9. Intent的属性及Intent-filter配置——实例Action、Data属性启动系统Activity

    一旦为Intent同时指定了Action.Data属性,那么Android将可根据指定的数据类型来启动特定的应用程序,并对指定数据类型执行相应的操作. 下面是几个Action属性.Data属性的组合. ...

  10. Bootstrap入门（二十四）data属性

    Bootstrap入门(二十四)data属性 你可以仅仅通过 data 属性 API 就能使用所有的 Bootstrap 插件,无需写一行 JavaScript 代码.这是 Bootstrap 中的一 ...

随机推荐

  1. Hibernate方法save、update、merge、saveOrUpdate及get和load的区别

    在看这几个方法区别之前,有必要了解hibernate实体对象的三种状态,点击查看 http://www.cnblogs.com/Y-S-X/p/8345754.html 一.update 和 merg ...

  2. MongoDB学习笔记 1.1

    //1.安装MongoDB数据库 cd D:\Software\MongoDB\data\bin mongod --dbpath "D:\Software\MongoDB\data\db&q ...

  3. UVa 572 Oil Deposits (Floodfill && DFS)

    题意 :输入一个m行n列的字符矩阵,统计字符“@”组成多少个八连块.如果两个字符“@”所在的格子相邻(横竖以及对角方向),就是说它们属于同一个八连块. 分析 :可以考虑种子填充深搜的方法.两重for循 ...

  4. 【POJ2992】Divisors

    [题目概括] 计算\(C_n^k\)的因子个数. [思路要点] 首先考虑将组合数展开,展开后就是\(\frac {n!}{k!\times (n-k)!}\). 这样就是计算出这些质因子的个数,然后将 ...

  5. http response压缩

    http response压缩 一.Spring boot启用Gzip压缩 application.xml新增配置: 未启用压缩时试验接口传输大小不变为61.88M,耗时1分多钟 启动压缩时试验接口传 ...

  6. 20175221 《Java程序设计》第10周学习总结

    20175221   <Java程序设计>第10周学习总结 教材学习内容总结 第十二章主要内容有: 进程与线程 进程是程序的一次动态执行过程,它对应了从代码加载.执行至执行完毕的一个完整过 ...

  7. 每日踩坑 2019-08-23 button 元素点击后刷新页面

    button标签按钮会提交表单. 解决方案: <button class="btn btn-primary" type="button" id=" ...

  8. Linux轻量级自动运维工具-Ansible浅析 转

    转自 Linux轻量级自动运维工具-Ansible浅析 - ~微风~ - 51CTO技术博客http://weiweidefeng.blog.51cto.com/1957995/1895261 Ans ...

  9. Spring的Ioc理解

    1.Ioc=控制反转和依赖注入(DI),两个是一回事 控制反转的好处: 把对象的创建和依赖定义在xml中,改变子类的实现变得很简单 控制反转减轻了对象之间的耦合度,减轻了对象之间的依赖关系,增加了系统 ...

  10. 如果将get请求转换成post请求

    td><a href="emp/${emp.id}">Edit</a></td> <form action="" ...