本文实例讲述了JavaScript中自定义事件用法。分享给大家供大家参考。具体分析如下:
在web前端开发中,很多人可能不会用到js的自定义事件,但如果是做一个相对来说比较大的项目,尤其是多人协同开发的时候,自定义事件就显得很重要了。那么,什么是js中的自定义事件呢?我们先来看一个例子:
前端开发员A封装了一个函数:
代码如下:function move(){
alert(a); //以此来代表N行代码
}
过段时间,前端开发员B要在A的基础上丰富这个函数,于是,他会这样写:
代码如下:function move(){
alert(a); //以此来代表N行代码
alert(b); //以此来代表N行代码
}
是不是发现了问题,B要注意和A的变量、函数等等的命名和冲突问题,又过段时间,前端开发员C也要丰富这个函数,于是:
代码如下:function move(){
alert(a); //以此来代表N行代码
alert(b); //以此来代表N行代码
alert(c); //以此来代表N行代码
}
这时候会很令人抓狂了,C写起代码来我敢肯定不会很轻松。解决这个问题的方法就是通过自定义事件,我们知道一个元素身上可以添加相同的事件而不会各自影响,如:
代码如下:window.addEventListener('click',function(){
alert(1);
} ,false);
window.addEventListener('click',function(){
alert(2);
} ,false);
点击页面的时候,1和2都会弹出,那么我们就可以用这种方法来定义我们的函数:
代码如下:window.addEventListener('move',function(){
alert(3);
} ,false);
window.addEventListener('move',function(){
alert(4);
} ,false);
这样,我们执行move();的时候就会弹出3和4,这里的move就是自定义事件,它其实就是一个函数
下面看看如何给事件处理程序传递参数:
代码如下://将有参数的函数封装为无参数的函数
function createFunction(obj, strFunc) {
var args = []; //定义args 用于存储传递给事件处理程序的参数
if (!obj) obj = window; //如果是全局函数则obj=window;
//得到传递给事件处理程序的参数
for (var i = 2; i < arguments.length; i++) args.push(arguments[i]);
//用无参数函数封装事件处理程序的调用
return function() {
obj[strFunc].apply(obj, args); //将参数传递给指定的事件处理程序
}
}
function class1() {
}
新闻热点
疑难解答
图片精选