zoukankan      html  css  js  c++  java
  • 关于this与e.target区别以及data-*属性

    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对象

    data-*属性

    很多时候想要一些节点与某些节点之间创建一些映射时,除了使用$(this).index()取出索引属性对二者进行比较外,还会使用到HTML5中的data-*属性,比方说在一个节点设定一个data-id="b"的属性,然后再想要映射的节点创建一个id="b"的属性,那么就可以使用data()方法建立映射,如:

    var $a = $('#a');
    var $b = $('#'+$a.data('id'));
  • 相关阅读:
    理解 Java Thread ContextClassLoader(线程上下文类加载器)
    StringUtils工具类常用方法汇总2(截取、去除空白、包含、查询索引)
    StringUtils工具类常用方法汇总1(判空、转换、移除、替换、反转)
    数组去重(2)
    数组去重(1)
    查找数组中的最大值(最小值)及相对应的下标
    javascript 隐式转换 == 之 [ ]==![ ] 结果为true,而{ }==!{ } 结果为false
    圣杯布局(2)>>>>>
    圣杯布局(1)>>>>>
    二分查找里的upper bound与lower bound的实现与分析
  • 原文地址:https://www.cnblogs.com/bydzhangxiaowei/p/8122165.html
Copyright © 2011-2022 走看看