jQuery绑定事件的覆盖

CodeSheep 发布于2019-08-21 10:37 / 414人阅读

摘要：中，事件的绑定是叠加式，而不是很多人想象的覆盖式。而很多时候，我们希望执行某函数做出某些判断之后，为元素重新绑定事件，而不是同时保留多个事件监听。

ECMAscript中，事件的绑定是叠加式，而不是很多人想象的覆盖式。如：

$("button").click(function(){
    alert("first");
});
$("button").click(function(){
    alert("second");
});

点击button之后，会先弹出first弹出框，再弹出second弹出框（而不是只弹出second弹出框）。

而很多时候，我们希望执行某函数、做出某些判断之后，为元素重新绑定事件，而不是同时保留多个事件监听。（比如：输入密码之前，点击“登录”提示“输入密码”，密码验证成功后点击“登录”提示“登录成功”）

下面介绍两种方法可以实现绑定事件覆盖效果：
(我要来秀我的成语水平了，前方高能，非战斗人员迅速撤离)

1.起死回生法

$("button").die().live("click",function(){
//新的绑定事件
});

先使用die()方法移除所有通过live()方法向元素添加的事件处理程序,再通过live()方法绑定新的事件。
这种方法有个前提，那就是被覆盖的方法也必须是通过live()方法绑定的，否则die()方法“杀不死”它们，会完全没有效果。

2.欲擒故纵法

$("button").unbind("click").click(function(){
//新的绑定事件
});

和第一种方法类似，先使用unbind()方法移除所有元素的事件处理程序,再绑定新的事件（后面可以改成bind()方法进行绑定）。
这种方法也有个前提，那就是被覆盖的方法如果是通过live()方法绑定的，会没有效果。

相信一定有多事的小伙伴要问了，到底什么时候用bind()方法或者live()方法？两者的区别是什么？
然而我要下班了，这个问题有点复杂，我会留到下一篇文章和大家一起探索。

GPU云服务器云服务器 jquery预绑定事件 jquery绑定hover事件 jquery绑定事件on jquery的事件处理

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

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

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

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

khs1994 2019-08-23 18:01 评论0 收藏0
【JavaScript系列】动态绑定事件方法：(1)jquery的on方法；(2)html元素绑定

摘要：提示如需移除事件处理程序，请使用方法。说明和绑定的点击事件被的事件覆盖。分析不同的绑定方式执行顺序属性元素事件事件。元素绑定事件删除按钮。属性绑定事件动态绑定事件方法的方法的属性绑定。一、动态监听加载对象当使用js或jQuery动态创建元素(例如append，appendChildren)，再用on(事件, function(){...})或addEventListener监听事件...

young.li 2019-08-26 10:20 评论0 收藏0
[译] addEventListener 与 onclick，孰优孰劣？

摘要：上面的例子应用了匿名函数这个特性，还可以使用构造函数或者闭包来添加事件监听器另一个重要特性，则是上面这段代码中最后一行的最后一个参数，用来控制监听器对于冒泡事件的响应。在这里你不能使用闭包或者匿名函数，并且控制域也是有限的。原文出处：addEventListener vs onclick 之所以会想到这个话题，是因为在回顾自己之前写的为 button 动态绑定事件的函数时，脑海里忽...

wums 2019-08-19 18:24 评论0 收藏0
JavaScript 浏览器事件解析

摘要：原文浏览器事件之间的关系程序采用了异步事件驱动编程模型，维基百科对它的解释是事件驱动程序设计英语是一种电脑程序设计模型。原文：https://keelii.github.io/2016/09/29/javascript-browser-event/ JavaScript、浏览器、事件之间的关系 JavaScript 程序采用了异步事件驱动编程（Event-driven program...

spacewander 2019-08-20 11:26 评论0 收藏0