js事件冒泡及event的target和currentTarget的區別

 

事件冒泡：從一個最具體的的元素接收，然後逐級向上傳播

可以形象地比喻爲把一顆石頭投入水中，泡泡會一直從水底冒出水面。

    <ul id="father">
      <li class="item1">aaaa</li>
      <li class="item2">bbb</li>
      <li class="item3">ccc</li>
      <li class="item4" id="child3">ddd</li>
    </ul>

 1. 在沒用冒泡的情況下，打印出是一樣的

<script type="text/javascript">
      document.getElementById("child3").onclick = function (event) {
        console.log(event.target === event.currentTarget); // 打印：true 
      };
    </script>

 2. 如果冒泡，看下區別

<script type="text/javascript">
      document.getElementById("father").onclick = function (event) {
        console.log(event.target); // 打印 <li class="item3">...
        console.log(event.currentTarget); // 打印 <ul id="father">...

};</script>

target：觸發事件的元素
currentTarget：事件綁定的元素

3. 上面（父級）有事件的話，會一直往上執行

1和2都會打印，如果不想執行2的話，阻止冒泡用

document.getElementById("child3").onclick = function (event) {
        event.stopPropagation()
        console.log(event.target === event.currentTarget);
      };

 

 

.