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

最新推荐文章于 2024-11-02 12:42:04 发布
最新推荐文章于 2024-11-02 12:42:04 发布
阅读量223 收藏
点赞数
文章标签： javascript ViewUI
原文链接：https://segmentfault.com/a/1190000007958549
版权

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

什么是javascript事件冒泡？

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div></div>
</body>
</html>

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

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

什么是javascript事件委托？

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

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

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

jQuery事件委托

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

<input type="text" class="datetimepicker">

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

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

clipboard.png

具体实现：

$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()取代，就不提啦。
weixin_33805743
关注
jQuery 还未生成元素时 如何绑定事件？
xzpwo222007的专栏
11-13 1716
很多时候我们可能需要使用JS生成一些数据及部分页面。 那么在还没有生成的页面中使用JQuery的click $("#id").click(function() { $("#id").toggle(); });或bind $("#id").bind("click", function () { $("#id").toggle(); });显然是绑定不上的，因为元素还未生成。
jquery为未加载的DOM元素（或许叫动态元素）绑定点击事件
Wetsion的博客
04-08 3330
      这两天公司要求把一些常用的组件进行封装，比如将bootstrap-table进一步封装（虽然我知道这有什么意义），在为table的操作栏里的编辑和删除标签绑定点击事件方法时，习惯性地写了使用这种：$(".delete").click(function(){ // ...操作 })但发现并没什么用，通过debugger发现，在编辑和删除标签还没加载出来时，js就已经走到了这里，但此...
jq 事件委托 将事件预绑定给未加载的元素
chyin1024的博客
03-27 2308
问题来源： 追加的 html 元素无法使用先前加载的 js 方法。 使用 jq 事件委托能够解决。 #分析# html 元素只能调用与它一起加载的 js 函数，无法调用比他先加载的 js 函数； 但 jq 函数却能监听控制之后加载的 html 元素； 两者的主动权不一样！ =========================================== 以
jquery为未加载的dom元素添加点击事件
夏微微的博客
12-18 794
点击搜索跳到筛选页面时，习惯的为筛选元素添加这种 $("#search-input").click(function(){ //操作 }) 后来发现筛选元素标签还没有加载出来，js就加载到这里，应该这样写 $("body").on('click', '#search-input',function(){ //操作 }) 将事件作用在整个body上，有点击操作时，查找目标target，满足条件就会执行 ...
使用事件委托绑定document未触发问题，以及如何查看某个元素是否绑定了事件
D浩DzD的博客
06-09 407
在项目中使用一个组件发现一个bug，当点击多条分录时会同时出现多个弹窗，正常情况下是点击弹窗外任意地方都会把关闭弹窗，从而始终只展示一个弹窗 然后看组件代码发现是通过给document绑定一个事件把整个弹窗给关闭 发现并没有效果，还以为是没给document绑定上事件，所以一直再找原因，到最后才发现是事件机制的原因，因为这是绑定在document上而发现在使用这个组件时他的祖先级组件不能使用.stop阻止冒泡，导致未触发该事件。 给绑定document或其他需要事件冒泡的时候要注意别阻止默认事件。 另
jquery html动态添加的元素绑定事件详解
10-22
接下来，我们将详细探讨如何使用jQuery为动态添加的HTML元素绑定事件。 首先，需要了解的是，在jQuery中，传统的直接事件绑定方式（如使用`.click()`、`.bind()`等方法）仅适用于静态内容。对于那些后来添加到DOM中...
jQuery中对未来的元素绑定事件用bind、live or on
10-26
为了解决这个问题，jQuery提供了一些机制来为未来元素绑定事件，比如`bind`、`live`、`on`和`.one()`方法。 首先，我们要认识到，`bind`方法是不可以用来绑定未来元素的事件的。这是因为在`bind`方法被调用的时候，...
jQuery给动态添加的元素绑定事件的方法
10-24
在讨论如何为动态添加的元素绑定事件之前，我们先了解一下jQuery中常用的几种事件绑定方法。首先是`bind`方法，它用于给选定的元素绑定一个或多个事件处理函数。其次是`click`方法，它是`bind`的一个特例，专门用来...
jQuery页面元素动态添加后绑定事件丢失方法,非 live
10-22
但默认情况下，使用jQuery的事件绑定方法，如`.click()`、`.change()`等，只能为初始化时存在于DOM中的元素绑定事件。如果页面内容是在页面加载完成后动态添加的，那么这些元素将不会拥有之前通过jQuery绑定的事件。...
JQuery事件委托(适用于给动态生成的脚本元素添加事件)
10-15
在上述场景中，开发者遇到了一个问题：使用jQuery为特定类名的元素绑定点击事件，但在内容动态更新后，这些事件不再生效。这是因为jQuery无法找到在新内容加载后生成的元素，因为它们在页面加载时并不存在。 事件...
为未出现的DOM元素绑定事件解决方案
Code-Create-World
09-19 6945
我们经常会给某一个DOM元素绑定事件，常规的方式: $("target").click(function(){...}) 这种方式对已经存在的元素是没问题的，但是如果我们此时需要为动态添加的DOM元素，即该元素可能在绑定时还未出现在DOM中，那么利用常规的方式是无法成功绑定的， 我们需要利用Jquery提供的以下方式进行绑定： $(document).on('click','selecto
jQuery on() 方法—向未创建的元素添加事件处理程序
PT - Blog
09-05 2149
jQuery on() 方法—向未创建的元素添加事件处理程序
jquery 绑定事件 - blur() 失去焦点 - focus() 获取焦点
DevOps海洋的渔夫@专栏
04-27 6803
事件函数列表 blur() 元素失去焦点 focus() 元素获得焦点 click() 鼠标单击 mouseover() 鼠标进入（进入子元素也触发） mouseout() 鼠标离开（离开子元素也触发） mouseenter() 鼠标进入（进入子元素不触发） mouseleave() 鼠标离开（离开子元素不触发） hover() 同时为mouseenter和mouseleave事件...
jq给动态生成的元素绑定事件
叶遮沉阳的博客
05-04 4197
经过实验， $(selector).on(event,childSelector,function),这种写法，确实可以。 但$(selector).on(event,function)不可以。 //不可以 window.onload = function() { $( "body>p" ).on( "click", function() { $( this ).after( "<...
jQuery动态生成的元素如何绑定事件
热门推荐
无痕之意的博客
10-09 3万+
 这段时间在写代码的时候遇到一个问题，通过append()添加的节点，点击事件不起作用。当时我百思不得其解，各种找错都没找到错误的原因。后来才发现是动态生成节点的问题，还是自己没有经验啊。   下面来总结一下这个问题的始末，温故而知新。  先看下click绑定事件的效果。 &amp;amp;amp;lt;div&amp;amp;amp;gt; &amp;amp;amp;lt;p&amp;amp;amp;gt;a&amp;amp;amp;lt;/p&amp
jQuery为元素绑定事件
chenqiuqian的博客
07-27 2791
这是bind链式方法，方法.bind(“事件名字”，事件处理函数).bind(“事件名字”，事件处理函数).bind(“事件名字”，事件处理函数)这个方法跟前面的几个方法有些不一样，这个是给父元素绑定事件，方法父元素.delegate(“事件名字”，“子元素”，事件处理函数)。这是键值对方法，方法.bind({“事件函数”事件处理函数，“事件函数”事件处理函数，“事件函数”事件处理函数})这是bind方法，方法bind(“事件名字”，事件处理函数)；为元素绑定事件的几个方法。...
一些常用的react hooks以及各自的作用
weixin_48602044的博客
11-01 280
关于react hooks的一些知识与应用
CesiumJS 案例 P12：添加指定长宽的图片图层并居中显示（圆点分别为图片图层的中心点、左上角顶点、右上角顶点、左下角顶点、右下角顶点）
weixin_52173250的博客
10-30 1134
CesiumJS 案例 P12：添加指定长宽的图片图层并居中显示（圆点分别为图片图层的中心点、左上角顶点、右上角顶点、左下角顶点、右下角顶点）
JavaScript 生成二维码
最新发布
qq_30049249的博客
11-02 129
我试过了，这一款js库支持中英文混合。进入网站后，可以直接点击运行哟～
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值