@mhevery , I have updated the commits.

1. use blackListedMap to check eventName is blackListed or not.
2. check isBlackListedEvent after zoneJsLoaded is true.
3. add test cases for add multiple listeners and add duplicate listener.

please review.

@mhevery , I have updated the source and write a sample code to describe how to set blackListedEvents for both addEventListener and onProperties, maybe we should document this somewhere.

Please review.

@mhevery , I found a bug which is the same one with angular/zone.js#839,

the issue can be described as the following case.

const handler1 = (e: any)=> {
        // handler remove itself 
        remover1 && remover1();
 };

const handler2 = (e: any) => {
   console.log('handler2');
};

const manager = new EventManager([domEventPlugin], new FakeNgZone());
remover1 = manager.addEventListener(element, 'click', handler1); 
remover2 = manager.addEventListener(element, 'click', handler2);
 
 getDOM().dispatchEvent(element, dispatchedEvent);

in previous version, handler2 will not be invoked because we remove the handler1 in handler1.

The modified code in dom_event.ts is copy the listeners array if necessary(only when listeners array length > 1)

// a global listener to handle all dom event,
// so we do not need to create a closure everytime
const globalListener = function(event: Event) {
  const symbolName = symbolNames[event.type];
  if (!symbolName) {
    return;
  }
  const taskDatas: TaskData[] = this[symbolName];
  if (!taskDatas) {
    return;
  }
  const args: any = [event];
  if (taskDatas.length === 1) {
    // if taskDatas only have one element, just invoke it
    const taskData = taskDatas[0];
    if (taskData.zone !== Zone.current) {
      // only use Zone.run when Zone.current not equals to stored zone
      return taskData.zone.run(taskData.handler, this, args);
    } else {
      return taskData.handler.apply(this, args);
    }
  } else {
    // copy tasks as a snapshot to avoid event handlers remove
    // itself or others
    const copiedTasks = taskDatas.slice();
    for (let i = 0; i < copiedTasks.length; i++) {
      const taskData = copiedTasks[i];
      if (taskData.zone !== Zone.current) {
        // only use Zone.run when Zone.current not equals to stored zone
        taskData.zone.run(taskData.handler, this, args);
      } else {
        taskData.handler.apply(this, args);
      }
    }
  }
};

it is the same with angular/zone.js#839 , please review.

Little late to the party, but doesn't the introduction of a globalEventHandler introduce a regression with using stopImmediatePropagation. This won't work anymore, because all the handlers on the same element will be called regardless. I also see issues once it's possible to add event options like capture, passive and definitely once.

@PierreDuc ,

1. about the stopImmediatePropagation, I will check it
2. about the capture, passive, once, before this PR, those options have not been handled either, so I don't think this PR bring more issues.

@JiaLiPassion I guess sample code will be fine:

Let's say your AppComponent has this template:

<app-foo></app-foo>
<app-foo></app-foo>

And your FooComponent looks like this:

@Component({
  selector: 'app-foo',
  template: ``
})
export class FooComponent {
 
  @HostListener('document:click', ['$event'])
  public onClick(event: MouseEvent): void {
      console.log('document has been clicked');
      event.stopImmediatePropagation();
  }

}

Then even though you call stopImmediatePropagation, the listener is called twice. I would expect only the first listener to be called.

@PierreDuc , got it, thank you, I can fix this one.

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}