jquery Event target currentTarget区别

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



你可能感兴趣的:(jquery Event target currentTarget区别)