jq 关于this与e.target区别

2021/4/26 10:25:38

编程Tag： 事件标题区别冒泡 jq event target 触发

本文主要是介绍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对象

这篇关于jq 关于this与e.target区别的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

jq 关于this与e.target区别

总结

相关编程文章