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. layui 中的$符号有可以和jquery冲突，var & = layui.$

    在项目上使用到了滚动条插件,但是使用var & = layui.$,会影响到插件. 错误提示: Uncaught TypeError: $(...).perfectScrollbar is n ...

  2. 用java imageio调整图片DPI，例如从96调整为300

    因项目需求把图片的DPI值提升到300,否则OCR识别产生错乱:直接上源码:1.图片处理接口: package util.image.dpi; import java.awt.image.Buffer ...

  3. IDC机房跳线

    服务网卡口与配线架 这里有一根网线 记录方式 签 A:23FM-23U-T07 (配线架网线) B:23FM-23U-NIC1(服务器网线) 在配线架的机柜旁边一定写明了 跳线的对面的   交换和配线 ...

  4. Python3 操作mysql数据库

    python关于mysql的API--pymysql模块 pymsql是Python中操作MySQL的模块,其使用方法和py2的MySQLdb几乎相同. 模块安装 pip install pymysq ...

  5. net core 下 接受文件 测试

    /* IFormFileCollection Files 再Request对象下的From对象下的Files对象 public interface IFormFileCollection : IRea ...

  6. python安装报错error writing to file：......

    今天换了win10 64电脑,安装python3.6.8时,报错:error writing to file:...... 安装时,右键--以管理员身份运行,安装成功.

  7. sar性能监控

    1.安装sar: yum -y install sysstat 第一次使用sar命令会提示如下错误:“无法打开 /var/log/sa/sa13: 没有那个文件或目录”. 这里的值13是当天的日期,如 ...

  8. spring cloud:config-eureka-refresh

    config-server-eureka project 1. File-->new spring project 2.add dependency <parent> <gro ...

  9. 实现Runable接口

    步骤 定义一个实现Runable接口的类,在类中实现run()方法(线程执行事件的方法).创建一个上述类的对象:Thread t=new Thread(new MyThreadt.start());调 ...

  10. Python的 counter内置函数，统计文本中的单词数量

    counter是 colletions内的一个类 可以理解为一个简单的计数 import collections str1=['a','a','b','d'] m=collections.Counte ...