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. LOJ-6278-数列分块入门2(分块)

    链接: https://loj.ac/problem/6278 题意: 给出一个长为 的数列,以及 个操作,操作涉及区间加法,询问区间内小于某个值 的元素个数. 思路: 分块,用vector维护每个区 ...

  2. Python 爬虫十六式 - 第一式：HTTP协议

    HTTP:伟大而又无闻的协议 学习一时爽,一直学习一直爽!   Hello,大家好啊,我是Connor,一个从无到有的技术小白.有的人一说什么是HTTP协议就犯愁,写东西的时候也没想过什么是HTTP协 ...

  3. tomcat8 的优化

    1.下载tomcat8 2.配置 修改tomcat_user.xml,配置管理用户(设置角色,和用户密码) <role rolename="manager"/> < ...

  4. SQL简介及分类

    SQL (Structured Query Language) 结构化查询语言,定义了所有操作关系型数据库的规则,只要是关系型数据库都需要用SQL语句: 语法: 一行可以有多个SQL语句,以分号结尾: ...

  5. Module——模块加载语法

    简介:标准module用法: 模块功能主要由两个命令构成:export和import. export有三种写法: // profile.js // 写法一 export var m = 1; // 写 ...

  6. aws常用命令

    EC2 挂载 EBS linux 查看块设备: lsblk 格式化磁盘: sudo mkfs -t ext4 /dev/xvdb 挂载卷: sudo mount /dev/xvdb /mnt/mydi ...

  7. spring cloud:feign-hystrix

    producer 1. File-->new spring starter project 2.add dependency       <dependency> <group ...

  8. 对AC自动机+DP题的一些汇总与一丝总结 (2)

    POJ 2778 DNA Sequence (1)题意 : 给出m个病毒串,问你由ATGC构成的长度为 n 且不包含这些病毒串的个数有多少个 关键字眼:不包含,个数,长度 DP[i][j] : 表示长 ...

  9. modern php笔记---1、新时代的php

    modern php笔记---1.新时代的php 一.总结 一句话总结: php有Zend Engine 和 Facebook开发的 HipHop Virtual Machine两套引擎 1.php也 ...

  10. 2、electron进程

    electron核心我们可以分成2个部分,主进程和渲染进程. 主进程: 主进程连接着操作系统和渲染进程,可以把她看做页面和计算机沟通的桥梁. Electron 运行 package.json 的 ma ...