jQuery 相关控件的事件操作分解


Posted in Javascript onAugust 03, 2009

今天突然对他的事件产生了兴趣,先前也碰到过,也没整理,今天有空就弄一下咯。

对于控件的事件,jQuery已经提供了丰富的方法,包括绑定、一次绑定、触发等,阿拉今早看看叫一哪能用额伐,大虾路古就可以了。

jQuery的绑定事件非常方便,有bind、live、one还有它帮你把一些常用的事件给单独了出来,比如控件的onclick事件,我们绑定onclick事件的时候只需要

$("#testButton").click(function() { 
alert("I'm Test Button"); 
});

就这样我们在testButton这个按钮上绑定了onclick事件,执行alert语句。我们也可以使用$("#testButton").click();来触发这个onclick事件,一切都非常ok啦。以上有点sb了,接下来看看取消事件。jQuery有unbind的方法,专门来取消绑定的,也就是取消事件,按照上面的例子的话,应该使用:$("#testButton").unbind("click");恩,看上去非常好,如果你的click有2个事件的话,你还可以使用unbind("click", fnName)来删除特定函数的绑定。为什么有这个取消特定函数的方法呢,我们来看下例子,我们会发现,javascript的事件,跟C#的事件如出一辙,事件的绑定是叠加(+=) 而不是覆盖。
var Eat = function() { 
alert("我要吃饭"); 
} var PayMoney = function() { 
alert("先付钱"); 
} 
jQuery(document).ready(function() { 
$("#testButton").click(Eat); 
$("#testButton").bind("click", PayMoney); 
});

通过上面的例子,我们发现会先弹出:“我要吃饭”紧接着会弹出“先付钱”,说明它的绑定是通过onclick+=fn进行的。我们修改下ready的方法:
jQuery(document).ready(function() { 
$("#testButton").click(Eat); 
$("#testButton").unbind(); 
$("#testButton").bind("click", PayMoney); 
});

又出错了,呵呵,这次点击按钮的话,只会执行PayMoney,不会执行Eat,那如果把unbind()放在bind后面的话,这样这个按钮就不会起作用了。但如果我要去掉绑定的PayMoney方法呢?这时候我们应该这样写:
jQuery(document).ready(function() { 
$("#testButton").click(Eat); 
$("#testButton").bind("click", PayMoney); 
$("#testButton").unbind("click", PayMoney); 
});

嘿嘿,跟bind其实一个样,不过接下来你将看到一个bug(我不知道算不算),让我们近距离体验一下
<input id="testButton" type="button" value="Test Button" onclick="Eat();" />  
<script type="text/javascript">  
jQuery(document).ready(function() { 
$("#testButton").unbind("click", Eat); 
$("#testButton").unbind(); 
$("#testButton").bind("click", PayMoney); 
}); 
</script> 

大家猜猜,会显示什么?吃饭?付钱?答案是Eat -> PayMoney,啊!!!我这里取消了绑定,又删除了特定的绑定,为什么还会执行Eat呢?其中的原由要看jQuery的类库了,我估计它只删除了通过JQuery绑定的那些事件了,呵呵。那这时候我们该如何呢?好在jQuery有很多方法,其中一个就是attr,他是对Dom元素的属性进行操作,我们利用attr来消除input上的click事件。 $("#testButton").attr("onclick", "");这样就可以把onclick事件清除了,记住,attr上因为是元素的属性,所以这里要写 “onclick” 而不是click,因为click是jQuery封装好的简写方式。好了,绑定就到这里了,弄个场景,大家也好记得住点:一日,老应、老赵、老陈出去吃饭,吃饱了,喝足了,准备付钱了,这时候
:<head>  
    <script type="text/javascript" src="jquery-1.2.6.min.js"></script>  
    <script type="text/javascript">  
        var PayMoney = function(name) {   
            alert(name + ":今天我请客,我来付钱");   
        }   
        jQuery(document).ready(function() {   
            $("#JeffreyPay").attr("onclick", "");   
            $("#JamesPay").attr("onclick", "");   
            $("#JeffreyPay").click(function() {   
                alert("。。。。这里不能刷卡");   
            });   
            $("#JeffreyPay").click(function() {   
                PayMoney("陈大");   
            });   
            $("#JamesPay").bind("click", function() {   
                alert("。。。。忘记带钱包了");   
            });   
            $("#JamesPay").bind("click", $("#DlyingPay").attr("onclick"));   
        });   
    </script>  
</head>  
<body>  
    <input id="JeffreyPay" onclick="PayMoney('赵帅');" type="button" value="老赵付钱" />  
    <input id="JamesPay" type="button" onclick="PayMoney('老应');" value="老应付钱" />  
    <input id="DlyingPay" type="button" onclick="PayMoney('陈大');" value="老陈付钱" />  
</body> 

以上内容均为原创,不要用在邪恶的地方哦。其实在绑定事件上还存在很多bug,大家可以稍微修改下上面的效果就会知道了,比如自动执行,绑定失败等,呵呵。
Javascript 相关文章推荐
xml分页+ajax请求数据源+dom取结果实例代码
Oct 31 Javascript
JavaScript写的一个DIV 弹出网页对话框
Aug 14 Javascript
JavaScript中的面向对象介绍
Jun 30 Javascript
JS正则验证邮箱的格式详细介绍
Nov 19 Javascript
JavaScript排序算法之希尔排序的2个实例
Apr 04 Javascript
chrome浏览器如何断点调试异步加载的JS
Sep 05 Javascript
火狐和ie下获取javascript 获取event的方法(推荐)
Nov 26 Javascript
移动端脚本框架Hammer.js
Dec 15 Javascript
vue checkbox 全选 数据的绑定及获取和计算方法
Feb 09 Javascript
详解javascript中的babel到底是什么
Jun 21 Javascript
JavaScript 面向对象基础简单示例
Oct 02 Javascript
Vue的双向数据绑定实现原理解析
Feb 17 Javascript
利用javascript实现一些常用软件的下载导航
Aug 03 #Javascript
jQuery 隔行换色 支持键盘上下键,按Enter选定值
Aug 02 #Javascript
一句话JavaScript表单验证代码
Aug 02 #Javascript
JavaScript 关键字屏蔽实现函数
Aug 02 #Javascript
Javascript 验证上传图片大小[客户端]
Aug 01 #Javascript
Javascript 汉字字节判断
Aug 01 #Javascript
JS 面向对象的5钟写法
Jul 31 #Javascript
You might like
详细解读php的命名空间(一)
2018/02/21 PHP
Laravel 自动生成验证的实例讲解:login / logout
2019/10/14 PHP
完美兼容IE,chrome,ff的设为首页、加入收藏及保存到桌面js代码
2014/12/17 Javascript
浅谈js中变量初始化
2015/02/03 Javascript
javascript实现模拟时钟的方法
2015/05/13 Javascript
javascript中apply、call和bind的使用区别
2016/04/05 Javascript
AngularJS API之copy深拷贝详解及实例
2016/09/14 Javascript
JAVA Web实时消息后台服务器推送技术---GoEasy
2016/11/04 Javascript
如何利用JQuery实现从底部回到顶部的功能
2016/12/27 Javascript
nodejs搭建本地http服务器教程
2017/03/13 NodeJs
vue-cli+webpack记事本项目创建
2017/04/01 Javascript
微信小程序删除处理详解
2017/08/16 Javascript
基于DOM节点删除之empty和remove的区别(详解)
2017/09/11 Javascript
微信小程序版翻牌小游戏
2018/01/26 Javascript
JavaScript强制类型转换和隐式类型转换操作示例
2019/05/01 Javascript
vue+elementUI实现简单日历功能
2020/09/24 Javascript
详解vue中使用transition和animation的实例代码
2020/12/12 Vue.js
将图片文件嵌入到wxpython代码中的实现方法
2014/08/11 Python
Python下使用Psyco模块优化运行速度
2015/04/05 Python
解析Mac OS下部署Pyhton的Django框架项目的过程
2016/05/03 Python
Python使用文件锁实现进程间同步功能【基于fcntl模块】
2017/10/16 Python
Python生成短uuid的方法实例详解
2018/05/29 Python
Django对models里的objects的使用详解
2019/08/17 Python
Python如何优雅获取本机IP方法
2019/11/10 Python
Python实现结构体代码实例
2020/02/10 Python
python3 re返回形式总结
2020/11/20 Python
C++和python实现阿姆斯特朗数字查找实例代码
2020/12/07 Python
python如何构建mock接口服务
2021/01/28 Python
美国嘻哈文化生活方式品牌:GLD
2018/04/15 全球购物
Cocopanda波兰:购买化妆品、护肤品、护发和香水
2020/05/25 全球购物
监理资料员岗位职责
2014/01/03 职场文书
推广活动策划方案
2014/08/23 职场文书
买卖合同纠纷代理词
2015/05/25 职场文书
银行求职信怎么写
2019/06/20 职场文书
一文简单了解MySQL前缀索引
2022/04/03 MySQL
sql查询语句之平均分、最高最低分及排序语句
2022/05/30 MySQL