jQuery绑定事件监听bind和移除事件监听unbind用法实例详解


Posted in Javascript onJanuary 19, 2016

本文实例讲述了jQuery绑定事件监听bind和移除事件监听unbind用法。分享给大家供大家参考,具体如下:

这里分别采用后bind(eventType,[data],Listener)//data为可选参数,one()该方法绑定的事件触发一次后自动删除,unbind(eventType,Listener),

实例:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>unbind(eventType,listener)</title>
<style type="text/css">
<!--
img{
 border:1px solid #000000;
}
input{
 border:1px solid #570000;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
 var fnMyFunc1; //函数变量
 $("img")
 .bind("click",fnMyFunc1 = function(){ //赋给函数变量
  $("#show").append("<div>点击事件1</div>");
 })
 .bind("click",function(){
  $("#show").append("<div>点击事件2</div>");
 })
 .bind("click",function(){
  $("#show").append("<div>点击事件3</div>");
 });
 $("input[type=button]").click(function(){
 $("img").unbind("click",fnMyFunc1); //移除事件监听myFunc1
 });
});
</script>
</head>
<body>
 <img src="11.jpg"> <input type="button" value="移除事件1">
 <div id="show"></div>
</body>
</html>

再来看这段测试代码:

<body>
<input type="button" name="aaa" value="点击我">
<input type="checkbox" name="checkbox1">
</body>

JQuery代码:

$().ready(function(){
for (var i = 0; i < 3; i++) {
$("input[type='button']").click(function(){
alert("aaaa");
});
}
}

alert("aaaa")会执行三次,在事件嵌套事件中,不希望看到这样的情况,需要把上层事件禁用,此时可引入bind和unbind函数解决。

引入函数:

for (var i = 0; i < 3; i++) {
$("input[type='button']").unbind("click");
$("input[type='button']").bind("click", function(){
alert("aaa");
});
}

alert("aaa");仅执行一次。

bind() 方法为被选元素添加一个或多个事件处理程序,并规定事件发生时运行的函数
unbind() 方法移除被选元素的事件处理程序。能够移除所有的或被选的事件处理程序,或者当事件发生时终止指定函数的运行。

event 是事件类型,类型包括:blur、flcus、load、resize、scroll、unload、click、dblclikc、mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleave、change、select、submit、keydown、keypress、keyup和error等,当然也可以是自定义名称。

data 为可选参数,作文event.data属性值传递给事件对象的额外数据对象。
function 是用来绑定的处理函数。 

语法:

$(selector).bind(event,data,function) 

event 和 function 必须指出下面些段代码做说明:

例1:删除p的所有事件

$("p").unbind();

例2:删除p的click事件
$("p").unbind("click");

例2:删除p元素click事件后出发的test函数 和 添加p元素click事件后触发的test函数
$("p").unbind("click",test);
$("p").bind("click",test);

注意:要定义 .bind() 必须指明什么事件和函数

现在来看个简单的demo ,整个div有一个点击收起展开的事件,如果想要点击链接但是不触发div的点击事件,需要在触发链接的时候把div的点击事件禁用,这里我用到链接mouseenter事件是unbind删除div的事件。这里还不算完,这时候只要鼠标进入链接区域,div的点击事件就删除了,我们还需要加入鼠标移出链接区域的时候恢复div点击事件。代码如下:

$(function(){ var Func = function(){
  $(".com2").toggle(200); }
  $(".test").click(Func)
  $(".test a").mouseenter(function(){
    $(".test").unbind(); //删除.test的所有事件
  });
  $(".test a").mouseleave(function(){
    $(".test").bind("click",Func); //添加click事件
  });
});

event 是事件类型

function 是用来绑定的处理函数。

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
关于include标签导致js路径找不到的问题分析及解决
Jul 09 Javascript
jquery获取radio值实例
Oct 16 Javascript
JavaScript导航脚本判断当前导航
Jul 12 Javascript
1秒50万字!js实现关键词匹配
Aug 01 Javascript
微信小程序使用第三方库Underscore.js步骤详解
Sep 27 Javascript
ES6入门教程之let和const命令详解
May 17 Javascript
微信小程序使用Socket的实例
Sep 19 Javascript
JavaScript实现全选取消效果
Dec 14 Javascript
详解webpack提取第三方库的正确姿势
Dec 22 Javascript
JavaScript实现的文本框placeholder提示文字功能示例
Jul 25 Javascript
vue3实现v-model原理详解
Oct 09 Javascript
js实现滑动进度条效果
Aug 21 Javascript
详解JavaScript对象序列化
Jan 19 #Javascript
学习JavaScript设计模式之单例模式
Jan 19 #Javascript
jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解
Jan 19 #Javascript
学习JavaScript设计模式之装饰者模式
Jan 19 #Javascript
jQuery事件绑定用法详解(附bind和live的区别)
Jan 19 #Javascript
浏览器环境下JavaScript脚本加载与执行探析之动态脚本与Ajax脚本注入
Jan 19 #Javascript
js实现有过渡渐变效果的图片轮播相册(兼容IE,ff)
Jan 19 #Javascript
You might like
老照片 - 几十年前的收音机与人
2021/03/02 无线电
mysql时区问题
2008/03/26 PHP
PHP读取大文件的几种方法介绍
2016/10/27 PHP
PHP+redis实现的购物车单例类示例
2019/02/02 PHP
编写高性能的JavaScript 脚本的加载与执行
2010/04/19 Javascript
javscript对象原型的一些看法
2010/09/19 Javascript
JS中Iframe之间传值的方法
2013/03/11 Javascript
调用innerHTML之后onclick失效问题的解决方法
2014/01/28 Javascript
js调试工具console.log()方法查看js代码的执行情况
2014/08/08 Javascript
javascript 面向对象封装与继承
2014/11/27 Javascript
HTML5+setCutomValidity()函数验证表单实例分享
2015/04/24 Javascript
JQuery选中checkbox方法代码实例(全选、反选、全不选)
2015/04/27 Javascript
全面解析Bootstrap中nav、collapse的使用方法
2016/05/22 Javascript
jQuery插件扩展extend的简单实现原理
2016/06/24 Javascript
canvas实现动态小球重叠效果
2017/02/06 Javascript
Bootstrap 表单验证formValidation 实现远程验证功能
2017/05/17 Javascript
前端html中jQuery实现对文本的搜索功能并把搜索相关内容显示出来
2017/11/14 jQuery
jquery插件开发模式实例详解
2019/07/20 jQuery
Vue如何循环提取对象数组中的值
2020/11/18 Vue.js
Python采集猫眼两万条数据 对《无名之辈》影评进行分析
2018/12/05 Python
python正则表达式匹配[]中间为任意字符的实例
2018/12/25 Python
Python中filter与lambda的结合使用详解
2019/12/24 Python
Python 操作 PostgreSQL 数据库示例【连接、增删改查等】
2020/04/21 Python
利用scikitlearn画ROC曲线实例
2020/07/02 Python
Python实现异步IO的示例
2020/11/05 Python
Django项目在pycharm新建的步骤方法
2021/03/02 Python
深入剖析HTML5 内联框架iFrame
2016/05/04 HTML / CSS
html5 canvas的绘制文本自动换行的示例代码
2018/09/17 HTML / CSS
Sandro Paris美国官网:典雅别致的法国时尚服饰品牌
2017/12/26 全球购物
美国最大的无人机经销商:DroneNerds
2018/03/20 全球购物
美国智能家居专家:tink
2019/06/04 全球购物
高级文秘工作总结的自我评价
2013/09/28 职场文书
总经理岗位职责范本
2014/02/02 职场文书
“三支一扶”支教教师思想汇报
2014/09/13 职场文书
四风查摆问题自查报告
2014/10/10 职场文书
2015年女工委工作总结
2015/07/27 职场文书