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. kafka2.12_1.0.1生产者示范代码

    import java.util.Properties;import kafka.javaapi.producer.Producer;import kafka.producer.KeyedMessag ...

  2. 兄弟连教育分享-SQL性能优化十条经验

    1.查询的模糊匹配 尽量避免在一个复杂查询里面使用 LIKE '%parm1%'——红色标识位置的百分号会导致相关列的索引无法使用,最好不要用. 兄弟连教育分享-SQL性能优化十条经验 解决办法: 其 ...

  3. javaweb上传大文件的问题

    总结一下大文件分片上传和断点续传的问题.因为文件过大(比如1G以上),必须要考虑上传过程网络中断的情况.http的网络请求中本身就已经具备了分片上传功能,当传输的文件比较大时,http协议自动会将文件 ...

  4. python实现的ocr接口

    太累了,,有时间再补解释 import pytesseract import requests from PIL import Image from PIL import ImageFilter fr ...

  5. python中pip相关命令

    用pip安装第三方包的命令 pip install xxx --user 用pip更新第三方包 pip install --upgrade xxx --user 用pip卸载第三方包 pip unin ...

  6. sh_04_累加求和

    sh_04_累加求和 # 计算 0 ~ 100 之间所有数字的累计求和结果 # 0. 定义最终结果的变量 result = 0 # 1. 定义一个整数的变量记录循环的次数 i = 0 # 2. 开始循 ...

  7. 手写ORM

    利用ORM把mysql中的数据封装成对象,通过对象点语法来获取mysql中的数据,所以自己手写一个ORM,方便我们操作数据 一.ORM:对象关系映射 类 >>> 数据库的一张表 对象 ...

  8. （77）一文了解Redis

    为什么我们做分布式使用Redis? 绝大部分写业务的程序员,在实际开发中使用 Redis 的时候,只会 Set Value 和 Get Value 两个操作,对 Redis 整体缺乏一个认知.这里对  ...

  9. Spotlight_on_mysql 安装和监控

    一.下载 1.下载并安装 mysql-connector-3.51.30 2.下载并安装 Quest_Spotlight-on-MySQL_80.exe 二.填写注册码 Authorization K ...

  10. 15 可视化工具 Navicat的简单使用

    本节重点: 掌握Navicat的基本使用 # PS:在生产环境中操作MySQL数据库还是推荐使用命令行工具mysql,但在我们自己开发测试时,可以使用可视化工具Navicat,以图形界面的形式操作My ...