zoukankan      html  css  js  c++  java
  • 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);
          };

    .

  • 相关阅读:
    【2020-11-16】就是自己的松散意识在作怪
    JQuery 事件
    JQuery DOM 有关代码练习
    JQuery中的DOM操作
    主题简介 ASP .NET
    JQuery 选择器 *很重要 多记
    JQuery 基础
    Ajax 获取数据代码
    Ajax 介绍
    JavaScript 基础二
  • 原文地址:https://www.cnblogs.com/xiangsj/p/14537947.html
Copyright © 2011-2022 走看看