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 相关文章推荐
syntaxhighlighter 使用方法
Jul 02 Javascript
JavaScript获取一个范围内日期的方法
Apr 24 Javascript
简介AngularJS的HTML DOM支持情况
Jun 17 Javascript
JavaScript实现Fly Bird小游戏
Dec 15 Javascript
three.js中文文档学习之如何本地运行详解
Nov 20 Javascript
基于Vuex无法观察到值变化的解决方法
Mar 01 Javascript
vue devtools的安装与使用教程
Aug 08 Javascript
uni-app之APP和小程序微信授权方法
May 09 Javascript
JavaScript实现星级评价效果
May 17 Javascript
vue基于better-scroll仿京东分类列表
Jun 30 Javascript
解决ant Design Search无法输入内容的问题
Oct 29 Javascript
vue项目proxyTable配置和部署服务器
Apr 14 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引用计数器进行垃圾收集机制介绍
2012/09/19 PHP
ThinkPHP3.1新特性之动态设置自动完成及自动验证示例代码
2014/06/23 PHP
详解WordPress中添加和执行动作的函数使用方法
2015/12/29 PHP
PHP弱类型的安全问题详细总结
2016/09/25 PHP
laravel 解决Eloquent ORM的save方法无法插入数据的问题
2019/10/21 PHP
jquery提示 &quot;object expected&quot;的解决方法
2009/12/13 Javascript
Jquery弹出层插件ThickBox的使用方法
2014/12/09 Javascript
nodejs实现获取当前url地址及url各种参数值
2015/06/25 NodeJs
jQuery解析XML 详解及方法总结
2016/09/28 Javascript
jQuery动态生成不规则表格(前后端)
2017/02/21 Javascript
jQuery判断邮箱格式对错实例代码讲解
2017/04/12 jQuery
win系统下nodejs环境安装配置
2017/05/04 NodeJs
JS实现的简单表单验证功能示例
2017/10/13 Javascript
详解Angular操作cookies方法
2018/06/01 Javascript
Vue中使用方法、计算属性或观察者的方法实例详解
2018/10/31 Javascript
深入了解JavaScript 私有化
2019/05/30 Javascript
vue-cli3跨域配置的简单方法
2019/09/06 Javascript
使用webpack搭建pixi.js开发环境
2020/02/12 Javascript
用实例解释Python中的继承和多态的概念
2015/04/27 Python
PyQT实现多窗口切换
2018/04/20 Python
Django框架实现分页显示内容的方法详解
2019/05/10 Python
python 基于TCP协议的套接字编程详解
2019/06/29 Python
解决django服务器重启端口被占用的问题
2019/07/26 Python
Python 中使用 PyMySQL模块操作数据库的方法
2019/11/10 Python
python json 递归打印所有json子节点信息的例子
2020/02/27 Python
CSS3圆角和渐变2种常用功能详解
2016/01/06 HTML / CSS
介绍一下代理模式(Proxy)
2014/10/17 面试题
交通专业个人自荐信格式
2013/09/23 职场文书
六月份红领巾广播稿
2014/02/03 职场文书
运动会广播稿150字(9篇)
2014/09/20 职场文书
学习党的群众路线教育实践活动心得体会范文
2014/11/03 职场文书
2015年依法行政工作总结
2015/04/29 职场文书
好人好事新闻稿
2015/07/17 职场文书
python中如何对多变量连续赋值
2021/06/03 Python
Node与Python 双向通信的实现代码
2021/07/16 Javascript
JavaScript流程控制(分支)
2021/12/06 Javascript