• jq 关于this与e.target区别


    在编写事件函数时可以传入一个event参数,event参数可以使用一个target属性如event.target用以调用,其作用是指向返回事件的目标节点(触发该事件的节点),这与this是有区别的。
    在js中事件属性是会冒泡的,所以在这情况下,如果选用this,那么this是随时变化的,它指向的总是当前触发的事件,而event.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",'blue');
          })
        });
      </script>
    </body>
    </html>
    

    总结

    上述的例子可以发现,绑定的事件是一个冒泡事件,即假如点击“公告标题”的li,它会先触发自身的click事件,然后因事件冒泡再触发因父元素也绑定的click事件。
    所以此时弹出的窗口共有4次,每两次为一组代表子元素与父元素,其中e.target一直指向触发该事件的节点,而this则随着事件的冒泡而不断变化。

    注意:this与e.target是JavaScript对象,(this)与(e.target)是jQuery对象

  • 相关阅读:
    RTT设备与驱动之串口
    RTT设备与驱动之PIN设备
    RTT之ENV
    MQTT学习之一
    思维导图软件
    英语单词学习方法
    RTT之POSIX
    10 个强大的JavaScript / jQuery 模板引擎推荐
    30个实用的jQuery选项卡/导航教程推荐
    jquery 自动完成 Autocomplete插件汇总
  • 原文地址:https://www.cnblogs.com/ZerlinM/p/14703270.html
Copyright © 2020-2023  润新知