杂记(关于this与e.target区别以及data-*属性)

11 篇文章 0 订阅
7 篇文章 0 订阅

1 thisevent.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则随着事件的冒泡而不断变化。

注意:thise.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'));
  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值