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 相关文章推荐
List Information About the Binary Files Used by an Application
Jun 11 Javascript
JavaScript中的字符串操作详解
Nov 12 Javascript
JQuery中使文本框获得焦点的方法实例分析
Feb 28 Javascript
JS JSOP跨域请求实例详解
Jul 04 Javascript
jQuery实现页面下拉100像素出现悬浮窗口的方法
Sep 05 Javascript
jquery实时获取时间的简单实例
Jan 26 Javascript
node中modules.exports与exports导出的区别
Jun 08 Javascript
vue双向绑定及观察者模式详解
Mar 19 Javascript
vue中使用vee-validator完成表单校验方案
Nov 01 Javascript
微信小程序自定义模态弹窗组件详解
Dec 24 Javascript
基于vue+element实现全局loading过程详解
Jul 10 Javascript
vue+elementui实现点击table中的单元格触发事件--弹框
Jul 18 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 $_ENV为空的原因分析
2009/06/01 PHP
PHP 一个比较完善的简单文件上传
2010/03/25 PHP
给初学者的30条PHP最佳实践(荒野无灯)
2011/08/02 PHP
PHP-Java-Bridge使用笔记
2014/09/22 PHP
基于PHP常用文件函数和目录函数整理
2017/08/17 PHP
js比较和逻辑运算符的介绍
2013/03/10 Javascript
jquery ajax的success回调函数中实现按钮置灰倒计时
2013/11/19 Javascript
JS获取各种浏览器窗口大小的方法
2014/01/14 Javascript
js检测输入内容全为空格的方法
2014/05/03 Javascript
解决jquery实现的radio重新选中的问题
2015/07/03 Javascript
js获取及判断键盘按键的方法
2015/12/01 Javascript
jQuery实现简单漂亮的Nav导航菜单效果
2017/03/29 jQuery
NodeJS实现图片上传代码(Express)
2017/06/30 NodeJs
vue基于mint-ui实现城市选择三级联动
2020/06/30 Javascript
vue如何判断dom的class
2018/04/26 Javascript
vue中render函数的使用详解
2018/10/12 Javascript
JavaScript的词法结构精华篇
2018/10/17 Javascript
微信小程序下拉框功能的实例代码
2018/11/06 Javascript
详解vue几种主动刷新的方法总结
2019/02/19 Javascript
vue基于viewer实现的图片查看器功能
2019/04/12 Javascript
Vuejs学习笔记之使用指令v-model完成表单的数据双向绑定
2019/04/29 Javascript
js 实现ajax发送步骤过程详解
2019/07/25 Javascript
Node.js 实现抢票小工具 &amp; 短信通知提醒功能
2019/10/22 Javascript
使用 JavaScript 创建并下载文件(模拟点击)
2019/10/25 Javascript
Python实现队列的方法
2015/05/26 Python
Python爬虫 scrapy框架爬取某招聘网存入mongodb解析
2019/07/31 Python
基于Numba提高python运行效率过程解析
2020/03/02 Python
python GUI库图形界面开发之PyQt5表单布局控件QFormLayout详细使用方法与实例
2020/03/06 Python
CSS3教程:background-clip和background-origin
2008/10/17 HTML / CSS
html5 冒号分隔符对齐的实现
2019/07/31 HTML / CSS
轻松制作精彩视频:Animoto
2018/09/19 全球购物
美国户外服装和装备购物网站:Outland USA
2020/03/22 全球购物
什么是serialVersionUID
2016/03/04 面试题
反洗钱宣传活动总结
2014/08/26 职场文书
民族学专业大学生职业规划范文:清晰未来的构想
2014/09/20 职场文书
简历上的自我评价,该怎么写呢?
2019/06/13 职场文书