jquery Event target currentTarget区别

最新推荐文章于 2021-08-06 03:57:29 发布

懒虫一个V

最新推荐文章于 2021-08-06 03:57:29 发布

阅读量3.4k

点赞数

分类专栏： Javascript jQuery

本文链接：https://blog.csdn.net/spy19881201/article/details/37655949

版权

Javascript 同时被 2 个专栏收录

35 篇文章 1 订阅

订阅专栏

jQuery

5 篇文章 0 订阅

订阅专栏

<span style="color:#ff0000;">target:目标阶段对象<br/>
  currentTarget:冒泡阶段的DOM对象<br/></span>

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html;charset=UTF-8"/>
  <title>target currentTarget</title>
  <script type="text/javascript" src="../../../core/libs/jquery-2.0.3.js"></script>
</head>
<body>
<div>原生：</div>
<div id="outer" style="background:#099">
  click outer
  <p id="inner" style="background:#9C0">click inner</p>
  <br>
</div>

<br/>

<div>jQuery</div>
<div id="outer2" style="background:#099">
  click outer
  <p id="inner2" style="background:#9C0">click inner</p>
  <br>
</div>

<div>
  <br/>
  jquery Event时间属性：<br/>
  target:目标阶段对象<br/>
  currentTarget:冒泡阶段的DOM对象<br/>

</div>

<script type="text/javascript">
  function G(id) {
    return document.getElementById(id);
  }
  function addEvent(obj, ev, handler) {
    if (window.attachEvent) {
      obj.attachEvent("on" + ev, handler);
    } else if (window.addEventListener) {
      obj.addEventListener(ev, handler, false);
    }
  }
  function test(e) {
    console.log('------原生 target currentTarget');
    console.log(e);
    console.log("e.target.tagName : " + e.target.tagName);
    console.log('e.currentTarget.tagName : ' + e.currentTarget.tagName);
  }
  var outer = G("outer");
  var inner = G("inner");
  //addEvent(inner, "click", test);
  addEvent(outer, "click", test);
</script>

<script type="text/javascript">
  $(function () {
    $('#outer2').click(function (e) {
      console.log('------jquery Event target currentTarget');
      console.log(e);
      console.log("e.target.tagName : " + e.target.tagName);
      console.log('e.currentTarget.tagName : ' + e.currentTarget.tagName);
    });
  });

</script>

</body>
</html>

懒虫一个V

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
jquery Event target currentTarget区别

target currentTarget 原生： click outer click inner jQuery click outer click inner jquery Event时间属性： target:目标阶段对象 currentTarget:冒泡阶段的DOM对象 function G(id) {
复制链接

扫一扫