JavaScript 自定义事件之我见

事件

　　技术一般水平有限，有什么错的地方，望大家指正。

　　事件就是用户和浏览器交互的一种途径。假如一个用户注册的功能，我们在填写完基本信息之后，点击提交按钮就可以实现注册功能，要想完成这个功能所需要的就是点击事件。我们预先定义好操作行为，在用户点击提交按钮时就执行我们预先定好的行为，在本例中我们的代码逻辑一般就是收集用户填写信息，验证信息合法性，利用AJAX与服务器交互。

　　这个过程就好像我们平时封装函数然后调用函数一样，事件其实也就类似函数定义函数调用这样的一个过程，只不过事件函数的调用是由用户的一些操作来告知浏览器，让浏览器在去调用函数的。

　　首先浏览器已经给我们提供了一列的事件，包括click,keydown等等，为什么还需要自定义事件呢？其实就是对我们的行为进行更准确的描述。以上面的用户注册为例我们可以定义一个名为saveMessage的事件，在点击提交按钮时触发这个事件，好像看起来更加直观一些，不过这看起来和普通的函数调用没什么区别，仔细想了想函数调用和事件触发的区别就是由我们自己执行的函数就是函数调用，不是由我们执行的函数就是事件触发。看下面的代码：

window.onload = function(){ var demo = document.getElementById("demo"); demo.onclick = handler; function handler(){  console.log("aaa"); }}

在我们点击按钮的时候就会打印aaa，而且很明显的可以看出函数并不是由我们调用的而是由浏览器来执行的，如果我们直接调用函数handler()一样可以打印aaa但这是由我们调用的所以是函数调用。

自定义事件的作用

　　自定义事件就是我们按照浏览器对事件的机制来自定义的函数。自定义事件，可以对我们的处理函数带来更好的说明，也可以为我们的插件带来更好的处理流程。假如我们又一个这样的需求：从服务器端拉取一组数据然后在HTML中显示成列表，然后标识出第一条数据，假如我们利用一个现有的处理函数，我们可能会这样来写：

dataTable("url");$("table").find("input[type='checkbox']:first").prop("checked",true);

　这是不能达到我们目的的因为JS是单线程的而AJAX是异步的，当代码$("table").find("input[type='checkbox']:first").prop("checked",true)执行的时候，我们需要的数据还没有获取到。我们去修改插件的内部实现显然是不明智的，一个可以被人接受的插件必然是有合理的回调函数（或者自定义事件）的,假如现在有一个列表绘制成功的回调函数，我们就可以把这个回调函数看做是一个事件，我们可以对这个事件添加事件操作，定义好处理函数，然后在列表绘制成功时让插件来执行这个处理函数。