• 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体的最后面,*/
  • 相关阅读:
    Oracle常用系统查询SQL
    easyui中使用的遮罩层
    EasyUI相同的Tab只打开一个(即EasyUI方法的调用方法)
    jQueryEasyUI创建菜单主页
    linux 的环境变量的配置文件
    angular reactive form
    svn代码回滚
    golang restful api
    golang embedded structs
    Angular Multiple HTTP Requests with RxJS
  • 原文地址:https://www.cnblogs.com/saolv/p/10193622.html
Copyright © 2020-2023  润新知