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 相关文章推荐
浅谈Jquery核心函数
Jun 18 Javascript
jQuery实现有动画淡出效果的二级折叠菜单代码
Oct 17 Javascript
prototype.js常用函数详解
Jun 18 Javascript
解析js如何获取css样式
Dec 11 Javascript
jQuery zTree树插件简单使用教程
Jan 10 Javascript
Vue2.0使用过程常见的一些问题总结学习
Apr 10 Javascript
underscore之Collections_动力节点Java学院整理
Jul 10 Javascript
微信小程序实现多宫格抽奖活动
Apr 15 Javascript
浅谈Vue-cli 命令行工具分析
Nov 22 Javascript
js设置鼠标悬停改变背景色实现详解
Jun 26 Javascript
Webpack 4如何动态切割JS注入文件名详解
Jul 09 Javascript
vue抽出组件并传值实例
Jul 31 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
Wordpress php 分页代码
2009/10/21 PHP
php判断变量类型常用方法
2012/04/24 PHP
基于header的一些常用指令详解
2013/06/06 PHP
解析yahoo邮件用phpmailer发送的实例
2013/06/24 PHP
php+mysql查询实现无限下级分类树输出示例
2016/10/03 PHP
解决PHP使用CURL发送GET请求时传递参数的问题
2019/10/11 PHP
js中function()使用方法
2013/12/24 Javascript
使用jquery制作弹出框效果
2015/04/03 Javascript
浅析JavaScript动画
2015/06/10 Javascript
js中substr,substring,indexOf,lastIndexOf,split,replace的用法详解
2015/11/09 Javascript
浅谈jquery页面初始化的4种方式
2016/11/27 Javascript
Angular的$http的ajax的请求操作(推荐)
2017/01/10 Javascript
解决vue.js this.$router.push无效的问题
2018/09/03 Javascript
解决vue A对象赋值给B对象,修改B属性会影响到A的问题
2018/09/25 Javascript
vue 父组件中调用子组件函数的方法
2019/06/06 Javascript
Javascript Symbol原理及使用方法解析
2020/10/22 Javascript
[02:39]我与DAC之Newbee.Moogy:从论坛到TI
2018/03/26 DOTA
Python上下文管理器和with块详解
2017/09/09 Python
详解Django-auth-ldap 配置方法
2018/12/10 Python
Python设计模式之抽象工厂模式原理与用法详解
2019/01/15 Python
Python写出新冠状病毒确诊人数地图的方法
2020/02/12 Python
用canvas显示验证码的实现
2020/04/10 HTML / CSS
英国百安居装饰建材网上超市:B&Q
2016/09/13 全球购物
你的自行车健身专家:FaFit24
2016/11/16 全球购物
Mybag美国/加拿大:英国奢华包包和名牌手袋网站
2020/02/16 全球购物
外包公司软件测试工程师
2014/11/01 面试题
行政经理岗位职责
2013/11/09 职场文书
自荐信格式写作方法有哪些呢
2013/11/20 职场文书
周鸿祎:教你写创业计划书
2013/12/30 职场文书
乡镇领导班子四风对照检查材料
2014/09/27 职场文书
预备党员考察表党小组意见
2015/06/01 职场文书
泰坦尼克号观后感
2015/06/04 职场文书
幼儿园家长心得体会
2016/01/21 职场文书
关于Numpy之repeat、tile的用法总结
2021/06/02 Python
一篇文章带你学习Mybatis-Plus(新手入门)
2021/08/02 Java/Android
win11开机发生死循环重启怎么办?win11开机发生死循环重启解决方法
2022/08/05 数码科技