关于this与e.target区别以及data-*属性
2024-09-05 17:52:15
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'));
最新文章
- js获取当前域名、Url、相对路径和参数以及指定参数
- 汇编实现点亮Led灯(2440)
- js cookie
- 【转】nanosleep的精度与调度算法的关系 来自:bean.blog.chinaunix.net
- iOS之 随笔Xcode7的lipo
- PLSQL_闪回操作5_Flashback Table
- Linux 网络故障排查
- HTML5教程:课时一HTML简介
- WPF概述
- Chapter 1 First Sight——9
- 期待微软平台即服务技术Service Fabric 开源
- kickstart无人值守
- Lnmp下pureftpd新建FTP账户权限不足解决方法
- Android ble蓝牙问题
- 软件测试-homework3
- spark中的combineByKey函数的用法
- Python学习基础(三)——装饰器,列表生成器,斐波那契数列
- mac系统默认python3.6
- /文件和目录权限chmod /更改所有者和所属组chown/umask/隐藏权限lsattr/chattr
- 敏感词过滤和XML的创建