本文实例讲述了JavaScript中自定义事件用法。分享给大家供大家参考。具体分析如下:
在web前端开发中,很多人可能不会用到js的自定义事件,但如果是做一个相对来说比较大的项目,尤其是多人协同开发的时候,自定义事件就显得很重要了。那么,什么是js中的自定义事件呢?我们先来看一个例子:
前端开发员A封装了一个函数:
function move(){ alert(a); //以此来代表N行代码 }
function move(){ alert(a); //以此来代表N行代码 alert(b); //以此来代表N行代码 }
function move(){ alert(a); //以此来代表N行代码 alert(b); //以此来代表N行代码 alert(c); //以此来代表N行代码 }
window.addEventListener('click',function(){ alert(1); } ,false); window.addEventListener('click',function(){ alert(2); } ,false);
window.addEventListener('move',function(){ alert(3); } ,false); window.addEventListener('move',function(){ alert(4); } ,false);
下面看看如何给事件处理程序传递参数:
//将有参数的函数封装为无参数的函数 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() { } class1.prototype = { show: function() { this.onShow(); }, onShow: function() { } } function objOnShow(userName) { alert("hello," + userName); } function test() { var obj = new class1(); var userName = "test"; obj.onShow = createFunction(null, "objOnShow", userName); obj.show(); }
"因为事件机制仅传递一个函数的名称,不带有任何参数的信息,所以无法传递参数进去",这是后话了,“要解决这个问题,可以从相反的思路去考虑,不考虑怎么把参数传进去,而是考虑如何构建一个无需参数的事件处理程序,该程序是根据有参数的事件处理程序创建的,是一个外层的封装。”,这里的“该程序”就是createFunction函数,它巧妙地利用apply函数将带参数的函数封装为无参数函数。最后我们看看如何实现自定义事件的多绑定:
// 使自定义事件支持多绑定 //将有参数的函数封装为无参数的函数 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() { } class1.prototype = { show: function() { if (this.onShow) { for (var i = 0; i < this.onShow.length; i++) { this.onShow[i](); } } }, attachOnShow: function(_eHandler) { if (!this.onShow) { this.onShow = []; } this.onShow.push(_eHandler); } } function objOnShow(userName) { alert("hello," + userName); } function objOnShow2(testName) { alert("show:" + testName); } function test() { var obj = new class1(); var userName = "your name"; obj.attachOnShow(createFunction(null, "objOnShow", userName)); obj.attachOnShow(createFunction(null, "objOnShow2", "test message")); obj.show(); }
//将有参数的函数封装为无参数的函数 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() { } class1.prototype = { show: function() { if (this.onShow) { for (var i = 0; i < this.onShow.length; i++) { this.onShow[i](); } } }, attachOnShow: function(_eHandler) { // 附加事件 if (!this.onShow) { this.onShow = []; } this.onShow.push(_eHandler); }, detachOnShow: function(_eHandler) { // 移除事件 if (!this.onShow) { this.onShow = []; } this.onShow.pop(_eHandler); } }function objOnShow(userName) { alert("hello," + userName); } function objOnShow2(testName) { alert("show:" + testName); } function test() { var obj = new class1(); var userName = "your name"; obj.attachOnShow(createFunction(null, "objOnShow", userName)); obj.attachOnShow(createFunction(null, "objOnShow2", "test message")); obj.show(); obj.detachOnShow(createFunction(null, "objOnShow", userName)); obj.show(); // 移除一个,显示剩余的一个 obj.detachOnShow(createFunction(null, "objOnShow2", "test message")); obj.show(); // 两个都移除,一个也不显示 }
希望本文所述对大家的javascript程序设计有所帮助。