JavaScript加强之自定义event事件


Posted in Javascript onSeptember 21, 2013
$().ready(function(){ 
for(var i=0;i<5;i++){ 
/** 
* 这种写法不专业,如果处于循环里,就会注册5次事件,点击后alert5次 
*/ 
// $("#aa").click(function(){ 
// alert("hahahaha"); 
// }); 
/** 
* 这种写法才是专业的,在注册一次点击事件前,先解绑点击事件,然后再绑定一个点击事件,所以到最后只绑定了一次点击事件 
*/ 
$("#aa").unbind("click"); 
$("#aa").bind("click",function(){ 
alert("oooooo"); 
}); 
} 
});

自定义事件:
$().ready(function(){ 
/** 
* 自定义事件,在click的时候进行触发 
*/ 
$("#aa").bind("click",function(){ 
//事件触发器,触发自定义的event 
$(this).trigger("点我"); 
}); 
//自定义一个"点我"事件 
$("#aa").unbind("点我"); 
$("#aa").bind("点我",function(){ 
alert("点我"); 
}); 
});

传递参数的自定义事件:
$().ready(function(){ 
/** 
* 自定义事件,在click的时候进行触发 
*/ 
$("#aa").bind("click",function(){ 
//事件触发器,触发自定义的event,传递实参 
$(this).trigger("点我",['张三','李四']); 
}); 
//自定义一个"点我"事件 
$("#aa").unbind("点我"); 
//第一个参数是固定的,后面都是自定义,就算把event写成别的名字,它还是固定类型,鼠标事件 
$("#aa").bind("点我",function(event,a,b){ 
alert("点我"); 
alert(a); 
alert(b); 
}); 
});

练习:

写一个自定义事件,把该事件绑定在一个下拉列表框中

当下拉列表框选中一项的时候,触发该事件,以参数的形式把选中的值传递到自定义事件中,并输出。

html:

<select id="select"> 
<option value="111">111</option> 
<option value="222">222</option> 
<option value="333">333</option> 
</select>

js:
$().ready(function(){ 
$("option").unbind("click"); 
$("option").bind("click",function(){ 
$(this).trigger("选择并显示",[$(this).val()]); 
}); $("option").unbind("选择并显示"); 
$("option").bind("选择并显示",function(event,value){ 
alert(value); 
}); 
});
Javascript 相关文章推荐
jQuery.get、jQuery.getJSON、jQuery.post无法返回JSON问题的解决方法
Jul 28 Javascript
JQUERY 获取IFrame中对象及获取其父窗口中对象示例
Aug 19 Javascript
Jqgrid表格随窗口大小改变而改变的简单实例
Dec 28 Javascript
jquery模拟进度条实现方法
Aug 03 Javascript
js实现选中复选框文字变色的方法
Aug 14 Javascript
jQuery.ajax 跨域请求webapi设置headers的解决方案
Aug 08 Javascript
javascript iframe跨域详解
Oct 26 Javascript
巧用Vue.js+Vuex制作专门收藏微信公众号的app
Nov 03 Javascript
快速入门Vue
Dec 19 Javascript
angularjs实现猜大小功能
Oct 23 Javascript
jQuery实现的隔行变色功能【案例】
Feb 18 jQuery
小程序实现简单语音聊天的示例代码
Jul 24 Javascript
JavaScript加强之自定义callback示例
Sep 21 #Javascript
js中通过split函数分割字符串成数组小例子
Sep 21 #Javascript
js中的异常处理try...catch使用介绍
Sep 21 #Javascript
使用JS读秒使用示例
Sep 21 #Javascript
用RadioButten或CheckBox实现div的显示与隐藏
Sep 21 #Javascript
JS.GetAllChild(element,deep,condition)使用介绍
Sep 21 #Javascript
JS.findElementById()使用介绍
Sep 21 #Javascript
You might like
PHP 程序授权验证开发思路
2009/07/09 PHP
用PHP的ob_start() 控制您的浏览器cache
2009/08/03 PHP
php GeoIP的使用教程
2011/03/09 PHP
php中将网址转换为超链接的函数
2011/09/02 PHP
php中is_null,empty,isset,unset 的区别详细介绍
2013/04/28 PHP
Win下如何安装PHP的APC拓展
2013/08/07 PHP
学习php开源项目的源码指南
2014/12/21 PHP
javascript提取URL的搜索字符串中的参数(自定义函数实现)
2013/01/22 Javascript
js单例模式详解实例
2013/11/21 Javascript
bootstrap data与jquery .data
2014/07/07 Javascript
js监听鼠标点击和键盘点击事件并自动跳转页面
2014/09/24 Javascript
JavaScript中constructor()方法的使用简介
2015/06/05 Javascript
JavaScript中判断两个字符串是否相等的方法
2015/07/07 Javascript
JS时间特效最常用的三款
2015/08/19 Javascript
jQuery实用技巧必备(上)
2015/11/02 Javascript
prototype.js常用函数详解
2016/06/18 Javascript
Javascript动画效果(2)
2016/10/11 Javascript
关于JS Lodop打印插件打印Bootstrap样式错乱问题的解决方案
2016/12/23 Javascript
jquery实现百叶窗效果
2017/01/12 Javascript
详解AngularJS2 Http服务
2017/06/26 Javascript
Vue实现导出excel表格功能
2018/03/30 Javascript
[02:32]DOTA2英雄基础教程 美杜莎
2014/01/07 DOTA
跟老齐学Python之类的细节
2014/10/13 Python
python动态进度条的实现代码
2019/07/03 Python
用python给自己做一款小说阅读器过程详解
2019/07/11 Python
Django 实现前端图片压缩功能的方法
2019/08/07 Python
python线程池 ThreadPoolExecutor 的用法示例
2020/10/10 Python
浅谈CSS3鼠标移入图片动态提示效果(transform)
2017/11/06 HTML / CSS
英国森林假期:Forest Holidays
2021/01/01 全球购物
农行实习自我鉴定
2013/09/22 职场文书
大学军训感言1500字
2014/03/09 职场文书
市政管理求职信范文
2014/05/07 职场文书
教师党的群众路线教育实践活动学习心得体会
2014/10/30 职场文书
食品安全责任书范本
2015/05/09 职场文书
售房协议书范本
2015/08/11 职场文书
2016年五四青年节校园广播稿
2015/12/17 职场文书