JS 控件事件小结

2020-03-25 16:00:32来源：爱站网阅读 ()

JS事件的控制其实是非常重要的，然而JS类本身是不支持事件的，其实在创建事件之前我们就要编写好控件，今天爱站技术频道将带着大家来了解JS 控件事件小结，希望能帮助到大家。
事件机制

对于事件的机制我不想多说，各种语言中对事件的描述都很具体，都是观察者模式的一种实现，我们可以从中抽取出事件必须的接口（由于控件库是基于jQuery 所以接口跟jquery保持一致）：

1.on: 绑定事件

2.off: 删除事件

3.fire: 触发事件

4.addTarget : 添加冒泡的对象

5.publish: 允许事件冒泡

jQuery 中的事件

jQuery 中的事件功能缺失很丰富，但是必须是jQuery对象才支持，我们自己定义的控件类无法直接使用jQuery的事件，事件的上下文也有问题，所以我们需要自己封装控件的事件。

jQuery 中的 Callbacks 是 1.7中添加的用于回调的机制，使用起来很方便，但是问题也是指定上下文需要在触发时指定，我们可以将其封装到我们自己的事件类中。

绑定事件：

函数原型: function on(eventType,callback) 参数：
1.eventType : 事件类型
2.callback ：回调函数
3.scope : 回调函数的上下文，这个变量在真正的控件绑定过程中使用的非常少，而且都有替代方案，所以为了简单起见，scope变量在此函数和下面的所有函数中就引入了。

上面回调函数的上下文是绑定事件的控件本身

删除绑定：
函数原型： function off(eventType,callback) 参数同上：

1.eventType : 事件类型
2.callback ：回调函数，此变量省略时，删除这个事件类型的所有绑定函数。
在真正的控件开发和使用过程中，删除事件比绑定事件要麻烦的多，删除事件时，你需要有绑定事件时函数的引用，如果需要频繁删除添加同一个事件时请考虑使用delegate

触发事件
函数原型： fire(eventType) :

1. eventType : 事件类型，绑定到对象上的此类型的函数执行。

这里有2点需要注意：

1.触发事件的方式，我们这里使用 ‘stopOnFalse'的方式，也就是绑定在同一个事件类型下的函数顺序执行，如果有一个返回值为false，那么下面的函数终止执行。其他触发事件的方式参考 jquery 的 Callbacks 。

2.事件的是否冒泡执行，也就是说，如果一个控件有多个子控件，那么子控件触发点击事件时可以冒泡到父类控件，我们只需要监听父类的冒泡事件即可

事件冒泡

函数原型： function(eventType,bubble) ：

1.eventType : 事件类型
2.bubble : 是否冒泡

此函数与 function addTarget(control) 相匹配使用。

addTarget 添加事件冒泡到的对象上，控件实现中，默认指定控件的父控件作为其冒泡的对象。

上面触发事件中讲到的，允许控件事件冒泡有很多好处：

1. 事件绑定后，子控件的添加删除不受影响

2. 事件使用更加方便，不需要去了解控件的内部

跟事件冒泡对应的是委托(delegate和 undelegate)，委托依赖于事件冒泡，DOM的事件机制和jQuery都支持委托，这是因为浏览器本身对DOM 事件冒泡的支持，而我们在控件上实现的事件冒泡机制足够我们实现委托的效果，所以委托的接口我们就不实现了。