【www.bbyears.com--jquery】
什么是自定义事件
自定义事件常伴左右，但是我们可能用得很少，我们可以看看jQuery的用法：
代码如下 // 监听自定义事件$node.on(CUSTOM_EVENT_NAME, callbackFn);
// 触发自定义事件
$node.trigger(CUSTOM_EVENT_NAME, params);
// 解除自定义事件
$node.off(CUSTOM_EVENT_NAME, fn);
看到这里，我们会发现，这个跟我们常用那些个浏览器事件用法几乎一样，只是多了个触发的方法。
那我们应该怎么去理解自定义事件呢？
实现
让我们来看看真实的自定义事件的实现，这样一来就很容易理解自定义事件了。
首先，有个事件对象，我们叫Events = {};。
事件监听
每次事件监听（或者说注册），比如$node.on(EVT_NAME, evtFn);，对应的其实是对事件对象做了这么一个处理：Events[EVT_NAME] = [evtFn];
相当于是给事件对象增加了一个key值和对应存放回调函数的数组对象。
事件解除
而解除自定义事件，其实是做了跟事件监听相反的操作。你增我删。
事件触发
最后是事件触发。
事件触发相当于，把存放的回调函数的数组对象按先后顺序执行了一遍。
实现代码
“通过事件机制，可以将类设计为独立的模块，通过事件对外通信，提高了程序的开发效率。”。相信C#程序员对事件的好处是深有体会的。好了，Code is cheap.看代码：
代码如下 function class1() { // 最简单的事件设计模式}
class1.prototype = {
show: function () {
this .onShow();
},
onShow: function () { }
}
function test() {
var obj = new class1();
obj.onShow = function () {
alert( " test " );
}
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 () {
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();
}
我们看到，attachOnShow方法实现的基本思想是对数组的push操作，其实我们还可以在事件执行完成之后，移除事件处理函数，下面单独实现：
代码如下
var event = document.createEvent(type);
type： 可以是DOM Level 2中的 HTMLEvents 也可以是 DOM Level 3中的 MouseEvent
可参考 https://developer.mozilla.org/en/DOM/document.createEvent
2) 初始化事件
event.initEvent(type, bubbles, cancelable);
type: 自定义事件的名称
bubbles: 是否冒泡
cancelable： 是否可取消
3) 侦听事件
target.addEventListener(type, listener, useCapture);
type：初始化时注册的事件名称
listener：一般为事件触发的所要执行的function
useCapture指出事件在冒泡还是捕获阶段执行
可参考 https://developer.mozilla.org/en/DOM/element.addEventListener
4) 派发事件
代码如下bool = element.dispatchEvent(event);
手动派发此事件，即可触发3中的listener 函数
一个完整的例子：
// create the event
var evt = document.createEvent("Event");
// define that the event name is `build`
evt.initEvent("build", true, true);
// elem is any element
elem.dispatchEvent(evt);
// later on.. binding to that event
// we"ll bind to the document for the event delegation style.
document.addEventListener("build", function(e){
// e.target matches the elem from above
}, 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 () {
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(); // 两个都移除，一个也不显示
}
1）创建事件