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 相关文章推荐
利用ASP发送和接收XML数据的处理方法与代码
Nov 13 Javascript
腾讯UED 漂亮的提示信息效果代码
Sep 12 Javascript
jquery弹出层类代码分享
Dec 27 Javascript
jQuery Trim去除字符串首尾空字符的实现方法说明
Feb 11 Javascript
Node.js模拟浏览器文件上传示例
Mar 26 Javascript
jQuery unbind()方法实例详解
Jan 19 Javascript
JavaScript中的boolean布尔值使用学习及相关技巧讲解
May 26 Javascript
AngularJS ng-bind-html 指令详解及实例代码
Jul 30 Javascript
微信小程序  自定义创建详细介绍
Oct 27 Javascript
jquery+css实现简单的图片轮播效果
Aug 07 jQuery
vue element-ui 绑定@keyup事件无效的解决方法
Mar 09 Javascript
vue项目中公用footer组件底部位置的适配问题
May 10 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
php中神奇的fastcgi_finish_request
2011/05/02 PHP
PHP抽象类 介绍
2012/06/13 PHP
深入PHP数据加密详解
2013/06/18 PHP
php版微信公众平台接口开发之智能回复开发教程
2016/09/22 PHP
PHP扩展类型及安装方式解析
2020/04/27 PHP
javascript+iframe 实现无刷新载入整页的代码
2010/03/17 Javascript
js实现的跟随鼠标移动的时钟效果(中英文日期显示)
2011/01/17 Javascript
Javascript 异步加载详解(浏览器在javascript的加载方式)
2012/05/20 Javascript
用js写了一个类似php的print_r输出换行功能
2013/02/18 Javascript
JavaScript将页面表格导出为Excel的具体实现
2013/12/27 Javascript
js 加密压缩出现bug解决方案
2014/11/25 Javascript
jquery动态添加删除(tr/td)
2015/02/09 Javascript
jQuery右下角旋转环状菜单特效代码
2015/08/10 Javascript
整理Javascript函数学习笔记
2015/12/01 Javascript
Bootstrap字体图标无法正常显示的解决方法
2016/10/08 Javascript
jQuery的Read()方法代替原生JS详解
2016/11/08 Javascript
学习vue.js表单控件绑定操作
2016/12/05 Javascript
JS对象与json字符串相互转换实现方法示例
2018/06/14 Javascript
浅谈vue父子组件怎么传值
2018/07/21 Javascript
如何使用 vue + d3 画一棵树
2018/12/03 Javascript
JavaScript多种图形实现代码实例
2020/06/28 Javascript
微信小程序实现文件预览
2020/10/22 Javascript
vue3.0实现点击切换验证码(组件)及校验
2020/11/18 Vue.js
[01:09]DOTAPLUS——DOTA2的新时代
2018/04/04 DOTA
python中列表元素连接方法join用法实例
2015/04/07 Python
Python中多线程的创建及基本调用方法
2016/07/08 Python
Python脚本获取操作系统版本信息
2016/12/17 Python
对numpy中shape的深入理解
2018/06/15 Python
请说出这段代码执行后a和b的值分别是多少
2015/03/28 面试题
企业总经理职责
2014/02/02 职场文书
最经典的大学生职业生涯规划范文
2014/03/05 职场文书
卫生巾广告词
2014/03/18 职场文书
安全生产先进个人事迹材料
2014/12/30 职场文书
自我评价优缺点范文
2015/03/11 职场文书
Python 中数组和数字相乘时的注意事项说明
2021/05/10 Python
Linux系统下安装PHP7.3版本
2021/06/26 PHP