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 相关文章推荐
防止动态加载JavaScript引起的内存泄漏问题
Oct 08 Javascript
使用JavaScript 实现各种跨域的方法
May 08 Javascript
JQuery实现绚丽的横向下拉菜单
Dec 19 Javascript
jQuery中scrollTop()方法用法实例
Jan 16 Javascript
Angular中的Promise对象($q介绍)
Mar 03 Javascript
JS异步文件分片断点上传的实现思路
Dec 25 Javascript
AngularJS使用ng-app自动加载bootstrap框架问题分析
Jan 04 Javascript
node.js中实现kindEditor图片上传功能的方法教程
Apr 26 Javascript
薪资那么高的Web前端必看书单
Oct 13 Javascript
微信小程序如何像vue一样在动态绑定类名
Apr 17 Javascript
vue中使用better-scroll实现滑动效果及注意事项
Nov 15 Javascript
js使用swiper实现层叠轮播效果实例代码
Dec 12 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图片加中文水印实现代码分享
2012/10/31 PHP
PHP实现微信公众平台音乐点播
2014/03/20 PHP
php中出现空白页的原因及解决方法汇总
2014/07/08 PHP
php实现的一段简单概率相关代码
2016/05/30 PHP
深入理解PHP中mt_rand()随机数的安全
2017/10/12 PHP
PHP实现SMTP邮件的发送实例
2018/09/27 PHP
JQuery困惑—包装集 DOM节点
2009/10/16 Javascript
jquery入门—编写一个导航条(可伸缩)
2013/01/07 Javascript
jQuery数据缓存功能的实现思路及简单模拟
2013/05/27 Javascript
基于SVG的web页面图形绘制API介绍及编程演示
2013/06/28 Javascript
Firefox和IE兼容性问题及解决方法总结
2013/10/08 Javascript
jquery 实现input输入什么div图层显示什么
2014/06/15 Javascript
JavaScript数组迭代器实例分析
2015/06/09 Javascript
基于AngularJS前端云组件最佳实践
2016/10/20 Javascript
video.js使用改变ui过程
2017/03/05 Javascript
解决axios发送post请求返回400状态码的问题
2018/08/11 Javascript
13 个npm 快速开发技巧(推荐)
2019/07/04 Javascript
JavaScript面向对象中接口实现方法详解
2019/07/24 Javascript
Vue使用Clipboard.JS在h5页面中复制内容实例详解
2019/09/03 Javascript
Layui表格监听行单双击事件讲解
2019/11/14 Javascript
JS this关键字在ajax中使用出现问题解决方案
2020/07/17 Javascript
微信小程序以7天为周期连续签到7天功能效果的示例代码
2020/08/20 Javascript
[37:35]DOTA2上海特级锦标赛A组资格赛#1 Secret VS MVP.Phx第二局
2016/02/25 DOTA
[14:19]2018年度COSER大赛-完美盛典
2018/12/16 DOTA
讲解python参数和作用域的使用
2013/11/01 Python
Python函数可变参数定义及其参数传递方式实例详解
2015/05/25 Python
pycharm下打开、执行并调试scrapy爬虫程序的方法
2017/11/29 Python
Python简单实现socket信息发送与监听功能示例
2018/01/03 Python
用Python将mysql数据导出成json的方法
2018/08/21 Python
CSS3条纹背景制作的实战攻略
2016/05/31 HTML / CSS
Viking Direct爱尔兰:办公用品和家具
2019/11/21 全球购物
大学生职业规划书的范本
2014/02/18 职场文书
食品安全处置方案
2014/06/14 职场文书
我的中国梦演讲稿1000字
2014/08/19 职场文书
2014年社区综治工作总结
2014/11/17 职场文书
Python通过m3u8文件下载合并ts视频的操作
2021/04/16 Python