jQuery事件委托为未添加的元素绑定事件

GitCafe 发布于2019-08-21 11:26 / 2403人阅读

摘要：在说事件委托之前先介绍一下事件冒泡。什么是事件委托事件委托就是讲事件监听器加在所要绑定元素的父元素上，为避免给每个特定的节点增加事件监听，避免在特定节点被删除时还要再删除它的绑定事件。

在说事件委托之前,先介绍一下事件冒泡。

什么是javascript事件冒泡？

根据红宝书，事件开始是由最具体的元素接受，然后逐级传播到较为不具体的节点
例如：




    
    Document

如果单击了div,则click事件会按照如下顺序传播
(1)div
(2)body
(3)html
(4)document

因为事件冒泡的原理，我们就可以将事件绑定在不具体的父元素上，点击具体的子元素，触发其父元素的事件，这就是事件委托。

什么是javascript事件委托？

事件委托就是讲事件监听器加在所要绑定元素的父元素上，为避免给每个特定的节点增加事件监听，避免在特定节点被删除时还要再删除它的绑定事件。
例子：


    Item 1
    Item 2
    Item 3
    Item 4
    Item 5
    Item 6

// 找到父元素，添加监听器...
document.getElementById("parent-list").addEventListener("click",function(e) {
    // e.target是被点击的元素!
    // 如果被点击的是li元素
    if(e.target && e.target.nodeName == "LI") {
        // do something
    }
});

然后，再介绍jQuery事件委托。

jQuery事件委托

这是我在调用bootstrap框架时要使用bootstrap的日历控件

发现如果是动态添加的元素，无法为新添加的元素增加事件，所以是无效的，所以我们应该将点击生成日历控件这个方法绑定在它的父元素上，使用jQuery中的on方法

$(selector).on(event,childSelector,data,function,map)，

具体实现：

$parent.on("focus",".datetimepicker",function(){
        $(this).datetimepicker({
            language:  "fr",
            format:"yyyy-mm-dd",
            todayBtn:  1,
            autoclose: 1,
            todayHighlight: 1,
            startView: 2,
            minView: 2,
            forceParse: 0
        });
});
还有一个方法是live(),不过在jQuery1.7中已被废弃，由on()取代，就不提啦。

GPU服务器服务器托管 jquery预绑定事件 jquery绑定hover事件 jquery绑定事件on 委托事件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/86703.html

jQuery源码解析之你并不真的懂事件委托及target和currenttarget的区别

摘要：源码源码行被点击了点击了，即委托的事件被点击了优先添加委托，再添加其他即委托在上的事件数量在下标为的位置插入委托事件解析可以看到，是优先添加委托事件，再添加自身事件，触发事件的时候也是按这个顺序。 showImg(https://segmentfault.com/img/remote/1460000019419722); 前言：请先回顾下我之前写的一篇文章：JavaScript之事件委...

khs1994 2019-08-23 18:01 评论0 收藏0
jQuery之事件绑定到触发全过程及知识点补充

摘要：十的触发机制被点击了元素本身绑定了一个事件，但是是原生事件，它是靠绑定来触发事件的。 showImg(https://segmentfault.com/img/remote/1460000019505402); 前言：最重要的还是最后的流程图，可以试着根据流程图手写实现$().on()，下篇文章会放出模拟实现的代码。一、举例这是A 这是C ...

Jioby 2019-08-23 18:10 评论0 收藏0
JavaScript事件委托原理

摘要：概念事件委托，通俗来说就是将元素的事件委托给它的父级或者更外级元素处理。级事件规定的事件流包括三个阶段事件捕获目标阶段事件冒泡原理事件委托就是利用事件冒泡机制实现的。最适合采用事件委托技术的事件包括和。概念事件委托，通俗来说就是将元素的事件委托给它的父级或者更外级元素处理。事件流事件流描述的是从页面中接收事件的顺序。事件冒泡：事件开始由最具体的元素接收，然后逐级向上传播到较为...

lscho 2019-08-21 17:56 评论0 收藏0