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 相关文章推荐
jquery 合并内容相同的单元格(示例代码)
Dec 13 Javascript
简单的js图片轮换代码(js图片轮播)
May 06 Javascript
一个JavaScript操作元素定位元素的实例
Oct 29 Javascript
jquery+javascript编写国籍控件
Feb 12 Javascript
JQuery中serialize() 序列化
Mar 13 Javascript
JavaScript获取表单内所有元素值的方法
Apr 02 Javascript
JS实现密码框根据焦点的获取与失去控制文字的消失与显示效果
Nov 26 Javascript
jQuery mobile在页面加载时添加加载中效果 document.ready 和window.onload执行顺序比较
Jul 14 Javascript
javascript 实现文本使用省略号替代(超出固定高度的情况)
Feb 21 Javascript
微信小程序开发之数据存储 参数传递 数据缓存
Apr 13 Javascript
layui在form表单页面通过Validform加入简单验证的方法
Sep 06 Javascript
Vue组件通信入门之Provide和Inject机制
Dec 29 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
40个迹象表明你还是PHP菜鸟
2008/09/29 PHP
PHP实现递归无限级分类
2015/10/22 PHP
php die()与exit()的区别实例详解
2016/12/03 PHP
Ucren Virtual Desktop V2.0
2006/11/07 Javascript
一个tab标签切换效果代码
2009/03/27 Javascript
js 禁止选择功能实现代码(兼容IE/Firefox)
2010/04/23 Javascript
JQuery设置和去除disabled属性的5种方法总结
2013/05/16 Javascript
ECMAScript6的新特性箭头函数(Arrow Function)详细介绍
2014/06/07 Javascript
javascript中setInterval的用法
2015/07/19 Javascript
JavaScript如何动态创建table表格
2020/08/02 Javascript
JS组件Bootstrap实现弹出框和提示框效果代码
2015/12/08 Javascript
ES6新增的math,Number方法
2017/08/06 Javascript
微信小程序嵌入腾讯视频源过程详解
2019/08/08 Javascript
vue-router的钩子函数用法实例分析
2019/10/26 Javascript
Vue-cli assets SubDirectory及PublicPath区别详解
2020/08/18 Javascript
javascript实现点击产生随机图形
2021/01/25 Javascript
EM算法的python实现的方法步骤
2018/01/02 Python
利用Python将文本中的中英文分离方法
2018/10/31 Python
Python 实现opencv所使用的图片格式与 base64 转换
2020/01/09 Python
Pycharm 安装 idea VIM插件的图文教程详解
2020/02/21 Python
pycharm中import呈现灰色原因的解决方法
2020/03/04 Python
Python GUI之tkinter窗口视窗教程大集合(推荐)
2020/10/20 Python
分享CSS3制作卡片式图片的方法
2016/07/08 HTML / CSS
html如何对span设置宽度
2019/10/30 HTML / CSS
HTML5 HTMLCollection和NodeList的区别详解
2020/04/29 HTML / CSS
函授毕业自我鉴定
2013/12/19 职场文书
决定成败的关键——创业计划书
2014/01/24 职场文书
银行稽核岗位职责
2015/04/13 职场文书
干部培训工作总结2015
2015/05/25 职场文书
2015年国庆节广播稿
2015/08/19 职场文书
大学副班长竞选稿
2015/11/21 职场文书
2016年“世界环境日”校园广播稿
2015/12/18 职场文书
幼儿园六一儿童节开幕词
2016/03/04 职场文书
教你使用pyinstaller打包Python教程
2021/05/27 Python
linux下安装redis图文详细步骤
2021/12/04 Redis
GoFrame基于性能测试得知grpool使用场景
2022/06/21 Golang