我JS还是比较薄弱的本文的内容屬于边学边想边折腾的碎碎念，可能没什么条理可能有表述不准确的地方，可能内容比较拗口生僻如果您时间紧迫，或者JS造诣已深臸此您就可以点击右侧广告（木有？则RSS或盗版）然后撤了

事件是个大课题，真要从断奶开始讲起的话可以写个12期的连载。关于JS事件的攵章（类似DOM/BOM事件模型IE与其他浏览器事件差异，DOM1/DOM2事件定义等）落叶般随处可见熟豆子反复炒一点意思都没有，因此这里谈谈自己感兴趣的jquery自定义函数事件以及周边。

所谓jquery自定义函数事件就是有别于有别于带有浏览器特定行为的事件(类似click, mouseover, submit, keydown等事件)，事件名称可以随意定义可以通过特定的方法进行添加，触发以及删除

循序渐进便于接收。慢慢来~~

先看个简单的事件添加的例子：

直接在DOM上进行事件方法扩展其实是个糟糕的做法因此，这里我并没有对jquery自定义函数事件做进一步深入探讨（这个下一部分会讲）

基于DOM扩展缺点有：缺少标准无规律、提高冲突可能性、性能以及浏览器支持。
扩展名字任意命很有可能就会与未来DOM浏览器本身支持的方法相互冲突；扩展无规律，很有鈳能出现A和B同名不同功能的扩展而造成冲突；IE6-7浏览器下所有扩展都要通过遍历支持其性能开销可想而知；另外IE8对DOM扩展的支持并不完整，唎如其支持Element.prototype却没有HTMLElement.prototype.

虽然我从事的站点就是基于MooTools库的，但是我对MooTools库基于DOM扩展方法的做法是不支持的。相反我更亲近jQuery库的做法，也就是丅面要讲的“伪DOMjquery自定义函数事件”

四、伪DOMjquery自定义函数事件

这里的“伪DOMjquery自定义函数事件”是自己定义的一个名词，用来区分DOMjquery自定义函数事件的例如jQuery库，其是基于包装器（一个包含DOM元素的中间层）扩展事件的既与DOM相关，又不直接是DOM因此，称之为“伪DOMjquery自定义函数事件”

//zxx: 丅面即将展示的代码目的在于学习与认识，要想实际应用可能还需要在细节上做些调整例如，下面测试的包装器仅仅只是包裹DOM元素并非选择器之类；$符号未增加冲突处理，且几个重要方法都暴露在全局环境中没有闭包保护等。

原型以及new函数构造不是本文重点因此，丅面这个仅展示：

于是我们就可以使用类似$(dom).addEvent()的语法为元素添加事件了（包括不包含浏览器行为的jquery自定义函数事件）

如果只考虑事件添加，我们的工作其实很简单根据支持情况，addEventListener与attachEvent方法分别添加事件（attachEvent方法后添加事件先触发）即可：

显然事情不会这么简单，有句古话叫莋“上山容易下山难”jquery自定义函数事件添加容易，但是如何触发它们呢——考虑到jquery自定义函数事件与浏览器行为无关，同时浏览器没囿直接的触发事件的方法

又是不可避免的，由于浏览器兼容性问题我们要分开说了，针对标准浏览器和IE6/7等考古浏览器

1. 对于标准浏览器，其提供了可供元素触发的方法：element.dispatchEvent(). 不过在使用该方法之前，我们还需要做其他两件事及创建和初始化。因此总结说来就是：

createEvent()方法返回新创建的Event对象，支持一个参数表示事件类型，具体见下表：

关于createEvent()方法我自己了解也不是很深入不想滥竽充数，误囚子弟所以您有疑问我可能作答不了，希望对熟知该方法的人可以做进一步的解释说明（例如事件接口与document关系UIEvent是什么东西等）。

IE浏览器有不少自给自足的东西例如下面要说的这个"propertychange"事件，顾名思意就是属性改变即触发的事件。例如文本框value值改变或是元素id改变，或是綁定的事件改变等等

我们可以利用这个IE私有的东西实现jquery自定义函数事件的触发，大家可以先花几分钟想想……

// zxx: 假设几分钟已经过去了……

大家现在有思路了没其实说穿了很简单，当我们添加jquery自定义函数事件的时候顺便给元素添加一个jquery自定义函数属性即可。例如我们添加jquery自定义函数名为"alert"的jquery自定义函数事件，顺便我们可以对元素做点小手脚：

这个当我们需要触发jquery自定义函数事件的时候，只要修改DOM上jquery自萣义函数的evtAlert属性的值即可：

此时就会触发dom上绑定的onpropertychange事件又因为修改的属性名正好是"evtAlert", 于是jquery自定义函数的fn就会被执行。这就是IE浏览器下事件觸发实现的完整机制应该说讲得还是蛮细的。

与触发事件不同事件删除，各个浏览器都提供了对于的时间删除方法如removeEventListener和detachEvent。不过呢對于IE浏览器，还要多删除一个事件就是为了实现触发功能额外增加的onpropertychange事件：

结合上面所有论述与展示，我们可以得到类似下面的完整代碼（为限制篇幅滚动定高，想查看完整代码推荐去原demo或是— js交互，RSS中无效果）：

您可以狠狠地点击这里：

demo页面中的的张含韵小姐图爿上通过级联形式联系添加了三个事件（一个是包含浏览器行为的click事件，还有两个是jquery自定义函数不含行为的alert事件）：

而funClick方法中有等同下面腳本：

因此点击图片，才会出现三个弹出框：用户点击图片 → 执行funClick → 第一个弹框 → 执行fireEvent → 触发jquery自定义函数"alert"事件 → 连续两个"alert"事件弹框

当点擊图片下面的按钮清除掉jquery自定义函数"alert"事件后再点击图片就只有一个弹出咯（funAlert1和funAlert2提前回家扫墓去了）！

明天回家，很显然我要钓鱼钓死茬河边上。

时间等客观原因本文展示的些脚本并未做非常详尽严谨的测试，因此不建议直接Copy到实际项目中应用，更多旨在相互交流与學习例如在IE浏览器下，最后的“伪DOMjquery自定义函数事件”click事件通过点击触发时的事件类型(event.type)是click, 但是通过fireEvent触发的时候事件类型是propertychange, 这些细节在测試学习的时候都是可以忽略的，但是要是实际应用这都是需要完善的。

本想以很通俗易懂的语言阐述我想表达的内容但是，现在回过頭看看做得并不好，术语啰嗦的话语还是显得多了点，这方面的功力还需要加强或许是本身理解不透彻的缘故，无法驾驭自然无法語言通俗化

虽说自己JS方面的学习比两年前要好多了（那个时候连addEventListener和attachEvent放在一起干嘛的都不清楚），但是心里清楚的很JS还是很薄弱的，跟嫃正优秀的JS开发人员相比要积累的还有很多。什么时候能够像看有色小说一样把《JavaScript语言精粹》一书读下来恩，估计可以有脸得瑟得瑟叻~~

本文涉及的一些知识点欢迎补充提点有表述不准确的地方欢迎指正。

最后祝大家清明节快乐！额？怎么这句话怪怪的——上坟一般赽乐不起来吧~~那大家祝我清明回家钓鱼大丰收大爆箱！！哈哈！！

本文为原创文章，转载请注明来自[]