zoukankan      html  css  js  c++  java
  • js事件委托

    什么叫事件委托?有点类似于异常处理,

    就比如,一个很不合理,只为讲清楚原理的例子,假如我们的js代码是这样,

    <script>
    $("body").click(function(){
    
    alert('hhh');
    }
    )
    </script>

    以上是给body标签绑定click事件,那么回出现什么现象呢?现象是,无论body体内部怎么写,无论是我们定义多少个标签,子标签,子子标签,等等,点击任何一个标签,都会触发这个function。这就是事件委托。就是说假如一个标签有事件,那么他就会从自身开始,层层向上传递这个事件,直到有个上级标签能处理了这个事件。因为body标签是我们能看到的页面的所有标签的最终上级标签,所以,这个不恰当的例子,就会有前面描述的现象

     <p>p1</p>

    <p>p1</p>
    <script>
    
    $("p").click(function(){
    alert('hhh');
    
    }
    )
    </script>
    <p>p2</p>
    
    /*以上html页面只写了一部分,剩下的可以自己补齐。
    如果补齐后放在浏览器里打开,那么,点击p1会弹窗,点击p2不会弹窗,这说明了,浏览器执行到js代码后,只执行一次,在本例中就是给上面的所有的p标签绑定事件。而p2是在这个js代码后的,浏览器还没有运行到那里,所以他没有被绑定点击事件。
    
    同时,明白了上面这个就应该能理解,假如这段代码,我们后面又添加一段js代码,这段js代码的作用生成了一个p标签,并把他插入到最上面,那么,点击这个p标签,他依然不会弹窗。这就说明了,我们这个点击事件触发弹窗的js代码,只运行一次,
    他的作用就是给已经渲染过的所有p标签了绑定点击事件,但他运行完了就不会再运行第二次,
    所以,js代码通常写在body体的最后面,*/
  • 相关阅读:
    [NOI2008] [bzoj1061] 志愿者招募
    [bzoj1070] 修车
    [群内模拟4.8] 定点爆破 后宫着♂火 签到题
    初识费用流 模板(spfa+slf优化) 餐巾计划问题
    Chromium的无锁线程模型C++代码示例
    JavaScript的Date类的函数特殊处理导致的问题
    ssh免密码快速登录配置
    container-with-most-water(最大蓄水问题)
    死锁
    美团2018春招编程题第一题 字符串距离 O(n)解法
  • 原文地址:https://www.cnblogs.com/saolv/p/10193622.html
Copyright © 2011-2022 走看看