引数のみだとcurrentTargetの値がNULLなのに。引数.currentTargetだと値が取得できます。

Question

コード
<ul id="blue2">
<!--     <li onclick="console.log(5);">jjj</li> -->
  <li id="No1" class="okokok">No1<p>ppp<p>aaa</p></p></li>
    <li id="No2" onClick="confirm('6')">No2</li>
    <li id="No4">No4</li>
  <li>No5</li>
</ul>


<scritp>
let blue2 = document.getElementById('blue2');
blue2.addEventListener('click', removeElement);
 function removeElement(e) {
  let li = e.target;
  let ul = li.firstChild;
  if (li.tagName === "IMG" || li.tagName === "LI") {    
  // ul.textContent = 3;
  // ul.removeChild(li);
    // li.parentNode.removeChild(li);
    // e.currentTarget.removeChild(ul);
    // ul.parentNode.removeChild(ul);
  // console.dir(li);
  // console.log(li);
  // console.log(ul);
  }
  console.log(e.currentTarget);
　　//→<ul id="blue2">
   console.log(e);
    //→PointerEvent {
　　　　　isTrusted: true, 
　　　　　pointerId: 1, 
　　　　　width: 1, 
　　　　　height: 1, 
　　　　　pressure: 0, 
          .
          .
          .
　　　　　currentTarget: null
　　　 etc..}
}

練習中のコードですのでonClickが付いていたり、意味不明なPタグが付いています。
要素をクリックすると、コンソールがそれぞれ表示されます。
console.log(e.currentTarget);
console.log(e);
上記のコードで書いた値なのですが、eのcurrentTargetのプロパティはNULLです。
targetはクリックしてからプロパティの値も変更されていました。
何故このような挙動なのか、違いなのか分かりません。宜しくお願い致します。

Answer 1

removeElement() の実行がすべて終わってからブラウザの開発者ツールのコンソールで▶ボタンを押して console.log(e) の表示を展開していると思います。このとき展開表示されるプロパティの値は、▶ボタンを押した時点での e のプロパティの値です。console.log(e) 実行時点での値ではありません。
DOMのイベントオブジェクトはイベントディスパッチの処理がすべておわるといくつかのプロパティがクリアされます。

開発者ツールのコンソールは簡易的なデバッグ補助ツールなので、正確な情報を得るためにはデバッガでブレークポイントをしかけたりステップ実行するなどしてください。

Comments

[cal_1]

貴重なご意見有難うございました。