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. C#Regex中replace方法的替换自定义小数点后的内容

    $1应该就是引用了这个组,不用这个会匹配不到 /// <summary> /// 截取 /// </summary> /// <param name="n&qu ...

  2. Ubuntu下安装CUDA8.0及nvidia驱动

    参考:https://blog.csdn.net/qq_35379989/article/details/80147630 cuda的历史版本下载地址:https://developer.nvidia ...

  3. ReentrantReadWriteLock源码分析笔记

    ReentrantReadWriteLock包含两把锁,一是读锁ReadLock, 此乃共享锁, 一是写锁WriteLock, 此乃排它锁. 这两把锁都是基于AQS来实现的. 下面通过源码来看看Ree ...

  4. Mac ssh key生成

    转载https://blog.csdn.net/wangjunling888/article/details/51115659 1. 查看秘钥是否存在 打开终端查看是否已经存在SSH密钥:cd ~/. ...

  5. kurento搭建以及运行kurento-hello-world

    搭建环境的系统是ubuntu 1.kurento服务器搭建 运行如下脚本即可完成安装 #!/bin/bash echo "deb http://ubuntu.kurento.org trus ...

  6. linux 汇编函数调用

    edi第一个参数 esi第二个参数 edx第三个参数 rax保存结果 C++代码如下: char* demo(char* a,int b){ static char* buf=0; if(!buf)b ...

  7. [论文理解] LFFD: A Light and Fast Face Detector for Edge Devices

    LFFD: A Light and Fast Face Detector for Edge Devices 摘要 从微信推文中得知此人脸识别算法可以在跑2K图片90fps,仔细一看是在RTX2070下 ...

  8. React Router学习笔记（转自阮一峰老师博客）

    React Router是一个路由库,通过管理URL来实现组件切换和状态转变. 1.安装和使用 $ npm install -S react-router 在使用时,作为React组件导入 impor ...

  9. mysql命令使用2

    mysql查询默认不区分大小写,如果需要区分大小写,使用binary mysql>select * from teacher where binary name='niu'; mysql查询默认 ...

  10. 十六、对RF中ROBOT_LIBRARY_SCOPE = 'GLOBAL'进行分析

    (1)ROBOT_LIBRARY_SCOPE属于ROBOT库范围,这个范围有三个等级,分别是TEST CASE.TEST SUITE.GLOBAL三个等级,默认是TEST CASE:GLOBAL这个等 ...