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 Mobile页面跳转后未加载外部JS原因分析及解决
Mar 18 Javascript
jquery使用淘宝接口跨域查询手机号码归属地实例
Nov 28 Javascript
jquery遍历checkbox的注意事项说明
Feb 21 Javascript
jquery 实现两Select 标签项互调示例代码
Sep 25 Javascript
javascript中Date()函数在各浏览器中的显示效果
Jun 18 Javascript
快速使用Bootstrap搭建传送带
May 06 Javascript
JavaScript中定时控制Throttle、Debounce和Immediate详解
Nov 17 Javascript
JS实现的JSON数组去重算法示例
Apr 11 Javascript
Angular4 反向代理Details实践
May 30 Javascript
jquery实现二级导航下拉菜单效果实例
May 14 jQuery
在layui中select更改后生效的方法
Sep 05 Javascript
vue postcss-px2rem 自适应布局
May 15 Vue.js
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 提取图片img标记中的任意属性的简单实例
2013/12/10 PHP
php中explode函数用法分析
2014/11/15 PHP
PHP重置数组为连续数字索引的几种方式总结
2018/03/12 PHP
基于thinkphp6.0的success、error实现方法
2019/11/05 PHP
超清晰的document对象详解
2007/02/27 Javascript
使用Jquery实现点击文字后变成文本框且可修改
2013/09/21 Javascript
js获取URL的参数的方法(getQueryString)示例
2013/09/29 Javascript
JS比较两个时间大小的简单示例代码
2013/12/20 Javascript
javascript简单性能问题及学习笔记
2014/02/04 Javascript
JavaScript获取表单enctype属性的方法
2015/04/02 Javascript
JavaScript实现将数组中所有元素连接成一个字符串的方法
2015/04/06 Javascript
jquery不常用方法汇总
2015/07/26 Javascript
通过正则表达式获取url中参数的简单实现
2016/06/07 Javascript
jQuery+CSS3文字跑马灯特效的简单实现
2016/06/25 Javascript
JavaScript中this的用法实例分析
2016/12/19 Javascript
你可能不知道的JSON.stringify()详解
2017/08/17 Javascript
最实用的JS数组函数整理
2017/12/05 Javascript
react实现菜单权限控制的方法
2017/12/11 Javascript
js实现下拉框二级联动
2018/12/04 Javascript
jQuery选择器之基本选择器用法实例分析
2019/02/19 jQuery
JS实现选项卡效果的代码实例
2019/05/20 Javascript
[03:57]《不朽》——2015DOTA2国际邀请赛—中国军团出征主题曲MV
2015/07/15 DOTA
零基础写python爬虫之urllib2中的两个重要概念:Openers和Handlers
2014/11/05 Python
微信跳一跳python辅助软件思路及图像识别源码解析
2018/01/04 Python
Django使用Celery异步任务队列的使用
2018/03/13 Python
python模式 工厂模式原理及实例详解
2020/02/11 Python
django修改models重建数据库的操作
2020/03/31 Python
python爬虫泛滥的解决方法详解
2020/11/25 Python
CSS3实现线性渐变用法示例代码详解
2020/08/07 HTML / CSS
日本亚马逊官方网站:Amazon.co.jp
2020/04/14 全球购物
内容编辑个人求职信
2013/12/10 职场文书
班会关于环保演讲稿
2013/12/29 职场文书
初中中等生评语
2014/12/29 职场文书
党支部综合考察意见
2015/06/01 职场文书
公司晚宴祝酒词
2015/08/11 职场文书
工作建议书范文
2019/07/08 职场文书