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);
      };

 

 

.