JS事件委托：JsAction
jopen
10年前
JsAction是一个微小的事件委托库，允许解耦 JavaScript 代码中处理 action 的 DOM 节点。添加事件处理器传统的方式就是获取节点的引用，然后添加到事件处理它。JsAction 允许用户通过自定义的 HTML 属性 jsaction 映射事件和这些事件处理器的名字。
用
In the DOM
Actions are indicated with the jsaction attribute. They are separated by ;, where each one takes the form:
[eventType:]<namespace>.<actionName>If an eventType is not specified, JsAction will assume click.
<div id="foo" jsaction="leftNav.clickAction;dblclick:leftNav.doubleClickAction"> some content here </div>
In JavaScript
Set up
var eventContract = new jsaction.EventContract; // Register the event types we care about. eventContract.addEvent('click'); eventContract.addEvent('dblclick'); var dispatcher = new jsaction.Dispatcher; eventContract.dispatchTo(goog.bind(dispatcher.dispatch, dispatcher)); Register individual handlers
/** * Do stuff when actions happen. * @param {!jsaction.ActionFlow} flow Contains the data related to the action * and more. See actionflow.js. * */ myapp.LeftNav.prototype.doStuff = function(flow) { // do stuff }; myapp.LeftNav.prototype.registerHandlers = function() { dispatcher.registerHandlers( 'leftNav', // the namespace this, // handler object { // action map 'clickAction' : this.doStuff, 'doubleClickAction' : this.doStuff }); };