JavaScript中自定义事件用法分析

本文实例讲述了JavaScript中自定义事件用法。分享给大家供大家参考。具体分析如下：

在web前端开发中，很多人可能不会用到js的自定义事件，但如果是做一个相对来说比较大的项目，尤其是多人协同开发的时候，自定义事件就显得很重要了。那么，什么是js中的自定义事件呢？我们先来看一个例子：前端开发员A封装了一个函数：

代码如下:

过段时间，前端开发员B要在A的基础上丰富这个函数，于是，他会这样写：

代码如下:

是不是发现了问题，B要注意和A的变量、函数等等的命名和冲突问题，又过段时间，前端开发员C也要丰富这个函数，于是：

代码如下:

这时候会很令人抓狂了，C写起代码来我敢肯定不会很轻松。解决这个问题的方法就是通过自定义事件，我们知道一个元素身上可以添加相同的事件而不会各自影响，如：

代码如下:

点击页面的时候，1和2都会弹出，那么我们就可以用这种方法来定义我们的函数：

代码如下:

这样，我们执行move();的时候就会弹出3和4，这里的move就是自定义事件，它其实就是一个函数

下面看看如何给事件处理程序传递参数：

代码如下:

"因为事件机制仅传递一个函数的名称，不带有任何参数的信息，所以无法传递参数进去",这是后话了，“要解决这个问题，可以从相反的思路去考虑，不考虑怎么把参数传进去，而是考虑如何构建一个无需参数的事件处理程序，该程序是根据有参数的事件处理程序创建的，是一个外层的封装。”，这里的“该程序”就是createFunction函数，它巧妙地利用apply函数将带参数的函数封装为无参数函数。最后我们看看如何实现自定义事件的多绑定：

代码如下:

我们看到，attachOnShow方法实现的基本思想是对数组的push操作，其实我们还可以在事件执行完成之后，移除事件处理函数，下面单独实现：

代码如下:

function objOnShow(userName) { alert("hello,"test message")); obj.show(); obj.detachOnShow(createFunction(null,userName)); obj.show(); // 移除一个，显示剩余的一个 obj.detachOnShow(createFunction(null,"test message")); obj.show(); // 两个都移除，一个也不显示 }

希望本文所述对大家的javascript程序设计有所帮助。

JavaScript 事件事件用法用法自定义自定义

JavaScript中自定义事件用法分析

相关推荐