JavaScript加强之自定义event事件
更新时间：2013年09月21日 16:04:56 作者：
event事件在本文以自定义的方式出现，感兴趣的朋友可以参考下，希望对大家有所帮助
复制代码 代码如下:
$().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);
});
});
相关文章
这篇文章主要为大家详细介绍了js实现模拟购物商城案例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-05-05
本文主要讲解javascript之迭代器，在 JavaScript 中，迭代器是一个对象，它定义一个序列，并在终止时可能返回一个返回值。需要详细了解相关知识的小伙伴可以参考一下这篇文章2021-09-09
这篇文章主要介绍了JavaScript递归算法生成树形菜单，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-08-08
这篇文章主要介绍了JS使用for in有序获取对象数据,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-05-05
javascript showModalDialog 内跳转页面的问题
在页面中使用了showModalDialog，但是在跳转链接时，不会在当前页执行，而是弹出一个新的页面。2010-11-11
JavaScript基于扩展String实现替换字符串中index处字符的方法
这篇文章主要介绍了JavaScript基于扩展String实现替换字符串中index处字符的方法,涉及javascript使用substr方法针对字符串进行替换操作的相关实现技巧,需要的朋友可以参考下2017-06-06
JS实现单例模式的多种方案 ，本文稍加总结，列出了6种方式与大家分享，大体上将内容分为了ES5（Function）与ES6（Class）实现两种部分，对js单例模式相关知识感兴趣的朋友跟随小编一起看看吧2022-09-09
网页中的"运行代码"是一个很方便的功能，可以直接看到代码的效果，感兴趣的朋友不妨参考下，或许对你学习js有所帮助，好了花不多说切入正题2013-02-02
这篇文章主要介绍了ant-design-pro使用qiankun微服务详解,其实微服务需要有主应用和子应用， 一个子应用可以配置多个相关联的主应用,配置方法都是一样的，对ant-design-pro微服务配置相关知识，感兴趣的朋友一起看看吧2022-03-03
这篇文章主要介绍了JS实现全屏预览F11功能的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-07-07
最新评论