阿里云自助建站模板,陕西省二级建造师官网,网站建设运营推广,洛阳小程序定制在 Angular 中如何为同一个表达式绑定多个事件呢#xff1f;如果我们这样做可能会是这样的#xff1a; divbutton (click, mouseover)onClick()Click me/button
/div复制代码在继续分析绑定多个事件之前#xff0c;我们先来分析…在 Angular 中如何为同一个表达式绑定多个事件呢如果我们这样做可能会是这样的 divbutton (click, mouseover)onClick()Click me/button
/div复制代码在继续分析绑定多个事件之前我们先来分析一下如果在模板中绑定一个事件如 click 事件Angular 是如何工作的 divbutton (click)onClick()Click me/button
/div复制代码Angular 在解析 DOM 树的时候对于事件绑定它会调用 DomRenderer 实例的 listen() 方法进行事件绑定listen() 方法具体实现如下 // angular2/packages/platform-browser/src/dom/dom_renderer.ts
class DefaultDomRenderer2 implements Renderer2 {....listen(target: window|document|body|any, event: string, callback: (event: any) boolean):() void {checkNoSyntheticProp(event, listener);if (typeof target string) {return () voidthis.eventManager.addGlobalEventListener(target, event, decoratePreventDefault(callback));}return () voidthis.eventManager.addEventListener(target, event, decoratePreventDefault(callback)) as() void;}
}复制代码通过源码我们发现不管走哪条分支最终都是调用 this.eventManager 对象的方法设置事件监听。这里的 this.eventManager 是什么它是 Angular 中的事件管理器 EventManager我们先来会会它。 EventManager (事件管理器) 在 Angular 中所有的事件绑定都是由一个事件管理器来驱动事件管理器本身由多个事件插件提供支持。Angular 中内置的事件插件如下 KeyEventsPlugin - 处理键盘事件HammerGesturesPlugin - 处理手势DomEventsPlugin - 处理 DOM 事件看完上面的内容相信很多人也会有疑问 - EventManager 到底是如何管理不同事件的呢要揭开这背后的秘密我们的唯一途径就是看源码因为它是最诚实的它对你毫无保留此刻脑海中突然想起一首歌 美丽的神话 解开我 最神秘的等待星星坠落 风在吹动终于再将你拥入怀中…. 爱是心中唯一不变美丽的神话 放松一下马上回到正题 - EventManager 类 EventManager 类 // angular2/packages/platform-browser/src/dom/events/event_manager.ts
export class EventManager {// EventManagerPlugin列表private _plugins: EventManagerPlugin[]; // 缓存已匹配的eventName与对应的插件private _eventNameToPlugin new Mapstring, EventManagerPlugin();constructor(Inject(EVENT_MANAGER_PLUGINS) plugins: EventManagerPlugin[], private _zone: NgZone) {plugins.forEach(p p.manager this);/*** {provide: EVENT_MANAGER_PLUGINS, useClass: DomEventsPlugin, multi: true},* {provide: EVENT_MANAGER_PLUGINS, useClass: KeyEventsPlugin, multi: true},* {provide: EVENT_MANAGER_PLUGINS, useClass: HammerGesturesPlugin, multi: true}* * slice(): 创建新的plugins数组* reverse(): 让DomEventsPlugin插件作为列表最后一项因为它能够处理所有的事件。*/this._plugins plugins.slice().reverse();}// 获取能处理eventName的插件并调用对应插件提供的addEventListener()方法addEventListener(element: HTMLElement, eventName: string,handler: Function): Function {const plugin this._findPluginFor(eventName);return plugin.addEventListener(element, eventName, handler);}// 获取能处理eventName的插件并调用对应插件提供的addGlobalEventListener()方法addGlobalEventListener(target: string, eventName: string, handler: Function): Function {const plugin this._findPluginFor(eventName);return plugin.addGlobalEventListener(target, eventName, handler);}// 获取NgZonegetZone(): NgZone { return this._zone; }/** internal */_findPluginFor(eventName: string): EventManagerPlugin {// 优先从_eventNameToPlugin对象中获取eventName对应的EventManagerPluginconst plugin this._eventNameToPlugin.get(eventName); if (plugin) {return plugin;}// 遍历插件列表判断当前插件是否支持eventName对应的事件名const plugins this._plugins;for (let i 0; i plugins.length; i) {const plugin plugins[i];if (plugin.supports(eventName)) {this._eventNameToPlugin.set(eventName, plugin);return plugin;}}throw new Error(No event manager plugin found for event ${eventName});}
}复制代码相关说明 在 addEventListener() 或 addGlobalEventListener() 方法内部都会调用 _findPluginFor() 方法查询对应的能够处理 eventName 对应的 EventManagerPlugin 插件对象。_findPluginFor() 方法中会遍历插件列表然后以 eventName 作为参数调用插件对象提供的 supports() 方法判断当前是否能够处理 eventName 对应的事件。因此对于 EventManagerPlugin 插件对象如果要声明能够处理某类事件就需要在 supports() 方法中进行相应处理。DomEventsPlugin 插件作为列表最后一项因为它能够处理所有的事件。KeyEventsPlugin、HammerGesturesPlugin、DomEventsPlugin 插件类都继承于 EventManagerPlugin 抽象类。EventManagerPlugin 抽象类 export abstract class EventManagerPlugin {constructor(private _doc: any) {}manager: EventManager;// 判断是否支持eventName对应的事件abstract supports(eventName: string): boolean;// 添加事件监听abstract addEventListener(element: HTMLElement, eventName: string, handler: Function): Function;// 添加全局的事件监听addGlobalEventListener(element: string, eventName: string, handler: Function): Function {const target: HTMLElement getDOM().getGlobalEventTarget(this._doc, element);if (!target) {throw new Error(Unsupported event target ${target} for event ${eventName});}return this.addEventListener(target, eventName, handler);};
}复制代码 时机已成熟接下来我们开始实现上述的功能。 自定义插件 Step 1: Creating a new plugin 正如上面提到的我们希望在我们的 Angular 模板上有多个事件绑定到同一个表达式 divbutton (click, mouseover)onClick()Click me/button
/div复制代码如果是这样我们的 supports() 函数的内部规则应该很清楚。我们需要一个字符串其中有一个或多个逗号分隔事件名称。当人们把一些愚蠢的东西放在(,click)中时我们也应该处理。所以我们的 supports() 函数如下 getMultiEventArray(eventName: string): string[] {return eventName.split(,).filter((item, index): boolean { return item item ! })
}supports(eventName: string): boolean {return this.getMultiEventArray(eventName).length 1
}复制代码这将允许 EventManager 将事件字符串如 (click, mouseover) 委派给此插件。 Step 2: Implementing the eventListeners 现在我们已经实现了supports() 方法EventManager 将调用 plugin.addEventListener() 方法因此插件需要实现 addEventListener() 方法从而实现我们的自定义行为。我们的自定义行为很简单 - 为我们解析的eventArray 中的所有事件添加事件侦听器。 addEventListener addEventListener(element: HTMLElement, eventName: string, handler: Function): Function {let zone this.manager.getZone();let eventsArray this.getMultiEventArray(eventName);// Entering back into angular to trigger changeDetectionlet outsideHandler (event: any) {zone.runGuarded(() handler(event));};// Executed outside of angular so that change detection is not // constantly triggered.let addAndRemoveHostListenersForOutsideEvents () {eventsArray.forEach((singleEventName: string) {this.manager.addEventListener(element, singleEventName, outsideHandler);});}return this.manager.getZone().runOutsideAngular(addAndRemoveHostListenersForOutsideEvents);}复制代码addGlobalEventListener addGlobalEventListener(target: string, eventName: string, handler: Function): Function {let zone this.manager.getZone();let eventsArray this.getMultiEventArray(eventName);let outsideHandler (event: any) zone.runGuarded(() handler(event));return this.manager.getZone().runOutsideAngular(() {eventsArray.forEach((singleEventName: string) {this.manager.addGlobalEventListener(target, singleEventName, outsideHandler);})});
}复制代码Step 3: Register plugin import { EVENT_MANAGER_PLUGINS } from angular/platform-browser;NgModule({...providers: [{ provide: EVENT_MANAGER_PLUGINS, useClass: MultiEventPlugin, multi: true }]
})
export class AppModule { }复制代码完整示例 multi-event.plugin.ts import { Injectable, Inject } from angular/core;
import { EventManager, DOCUMENT, ɵd as EventManagerPlugin } from angular/platform-browser;/*** Support Multi Event*/
Injectable()
export class MultiEventPlugin extends EventManagerPlugin {manager: EventManager;constructor( Inject(DOCUMENT) doc: any) { super(doc); }getMultiEventArray(eventName: string): string[] { return eventName.split(,) // click,mouseover [click,mouseover].filter((item, index): boolean { return item item ! })}supports(eventName: string): boolean {return this.getMultiEventArray(eventName).length 1;}addEventListener(element: HTMLElement, eventName: string, handler: Function): Function {let zone this.manager.getZone();let eventsArray this.getMultiEventArray(eventName);// Entering back into angular to trigger changeDetectionlet outsideHandler (event: any) {zone.runGuarded(() handler(event));};// Executed outside of angular so that change detection is// not constantly triggered.let addAndRemoveHostListenersForOutsideEvents () {eventsArray.forEach((singleEventName: string) {this.manager.addEventListener(element, singleEventName, outsideHandler);});}return this.manager.getZone().runOutsideAngular(addAndRemoveHostListenersForOutsideEvents);}addGlobalEventListener(target: string, eventName: string, handler: Function): Function {let zone this.manager.getZone();let eventsArray this.getMultiEventArray(eventName);let outsideHandler (event: any) zone.runGuarded(() handler(event));return this.manager.getZone().runOutsideAngular(() {eventsArray.forEach((singleEventName: string) {this.manager.addGlobalEventListener(target, singleEventName, outsideHandler);});});}
}复制代码app.component.ts import { Component } from angular/core;Component({selector: exe-app,template: divbutton (click,mouseover)onClick()Click me/button/div
})
export class AppComponent {onClick() {console.log(Click);}
}复制代码app.module.ts import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from angular/core;
import { EVENT_MANAGER_PLUGINS } from angular/platform-browser;
import { BrowserModule } from angular/platform-browser;
import { FormsModule } from angular/forms;import { AppComponent } from ./app.component;
import { MultiEventPlugin } from ./plugins/multi-event.plugin;NgModule({imports: [BrowserModule],declarations: [AppComponent],bootstrap: [AppComponent],providers: [{ provide: EVENT_MANAGER_PLUGINS, useClass: MultiEventPlugin, multi: true }],schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule { }复制代码参考资源 Hacking Angular2: Binding Multiple DOM Events
