Skip to content

Commit 5463462

Browse files
JiaLiPassionAndrewKushnir
JiaLiPassion
authored and
AndrewKushnir
committed
fix(zone.js): Make EventTarget methods optional in zone.js extension API (#35954)
`zone.js` added `removeAllListeners` and `eventListeners` methods in `EventTarget.prototype`, but those methods only exists when user import `zone.js` and also enables `EventTarget` monkey patching. If user: 1. Does not import `zone.js` and uses `noop` zone when bootstrapping Angular app. OR 2. Disable monkey patching of `EventTarget` patch by defining `__Zone_disable_EventTarget = true`. Then `removeAllListeners` and `eventListeners` methods will not be present. PR Close #35954
1 parent 8456c5e commit 5463462

File tree

2 files changed

+37
-31
lines changed

2 files changed

+37
-31
lines changed

‎packages/zone.js/lib/zone.api.extensions.ts

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,22 +17,28 @@ interface EventTarget {
1717
*
1818
* Remove all event listeners by name for this event target.
1919
*
20+
* This method is optional because it may not be available if you use `noop zone` when
21+
* bootstrapping Angular application or disable the `EventTarget` monkey patch by `zone.js`.
22+
*
2023
* If the `eventName` is provided, will remove event listeners of that name.
2124
* If the `eventName` is not provided, will remove all event listeners associated with
2225
* `EventTarget`.
2326
*
2427
* @param eventName the name of the event, such as `click`. This parameter is optional.
2528
*/
26-
removeAllListeners(eventName?: string): void;
29+
removeAllListeners?(eventName?: string): void;
2730
/**
2831
*
2932
* Retrieve all event listeners by name.
3033
*
34+
* This method is optional because it may not be available if you use `noop zone` when
35+
* bootstrapping Angular application or disable the `EventTarget` monkey patch by `zone.js`.
36+
*
3137
* If the `eventName` is provided, will return an array of event handlers or event listener
3238
* objects of the given event.
3339
* If the `eventName` is not provided, will return all listeners.
3440
*
3541
* @param eventName the name of the event, such as click. This parameter is optional.
3642
*/
37-
eventListeners(eventName?: string): EventListenerOrEventListenerObject[];
43+
eventListeners?(eventName?: string): EventListenerOrEventListenerObject[];
3844
}

‎packages/zone.js/test/browser/browser.spec.ts

Lines changed: 29 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1127,11 +1127,11 @@ describe('Zone', function() {
11271127
});
11281128

11291129
zone.run(() => { button.addEventListener('click', function() { logs.push('click'); }); });
1130-
let listeners = button.eventListeners('click');
1130+
let listeners = button.eventListeners !('click');
11311131
expect(listeners.length).toBe(1);
11321132
eventTask !.zone.cancelTask(eventTask !);
11331133

1134-
listeners = button.eventListeners('click');
1134+
listeners = button.eventListeners !('click');
11351135
button.dispatchEvent(clickEvent);
11361136
expect(logs.length).toBe(0);
11371137
expect(listeners.length).toBe(0);
@@ -1153,11 +1153,11 @@ describe('Zone', function() {
11531153
zone.run(() => {
11541154
button.addEventListener('click', function() { logs.push('click'); }, true);
11551155
});
1156-
let listeners = button.eventListeners('click');
1156+
let listeners = button.eventListeners !('click');
11571157
expect(listeners.length).toBe(1);
11581158
eventTask !.zone.cancelTask(eventTask !);
11591159

1160-
listeners = button.eventListeners('click');
1160+
listeners = button.eventListeners !('click');
11611161
button.dispatchEvent(clickEvent);
11621162
expect(logs.length).toBe(0);
11631163
expect(listeners.length).toBe(0);
@@ -1179,7 +1179,7 @@ describe('Zone', function() {
11791179
zone.run(
11801180
() => { button.addEventListener('click', function() { logs.push('click1'); }); });
11811181
button.addEventListener('click', function() { logs.push('click2'); });
1182-
let listeners = button.eventListeners('click');
1182+
let listeners = button.eventListeners !('click');
11831183
expect(listeners.length).toBe(2);
11841184

11851185
button.dispatchEvent(clickEvent);
@@ -1188,7 +1188,7 @@ describe('Zone', function() {
11881188
eventTask !.zone.cancelTask(eventTask !);
11891189
logs = [];
11901190

1191-
listeners = button.eventListeners('click');
1191+
listeners = button.eventListeners !('click');
11921192
button.dispatchEvent(clickEvent);
11931193
expect(logs.length).toBe(1);
11941194
expect(listeners.length).toBe(1);
@@ -1212,7 +1212,7 @@ describe('Zone', function() {
12121212
button.addEventListener('click', function() { logs.push('click1'); }, true);
12131213
});
12141214
button.addEventListener('click', function() { logs.push('click2'); }, true);
1215-
let listeners = button.eventListeners('click');
1215+
let listeners = button.eventListeners !('click');
12161216
expect(listeners.length).toBe(2);
12171217

12181218
button.dispatchEvent(clickEvent);
@@ -1221,7 +1221,7 @@ describe('Zone', function() {
12211221
eventTask !.zone.cancelTask(eventTask !);
12221222
logs = [];
12231223

1224-
listeners = button.eventListeners('click');
1224+
listeners = button.eventListeners !('click');
12251225
button.dispatchEvent(clickEvent);
12261226
expect(logs.length).toBe(1);
12271227
expect(listeners.length).toBe(1);
@@ -1245,7 +1245,7 @@ describe('Zone', function() {
12451245
button.addEventListener('click', function() { logs.push('click1'); }, true);
12461246
});
12471247
button.addEventListener('click', function() { logs.push('click2'); });
1248-
let listeners = button.eventListeners('click');
1248+
let listeners = button.eventListeners !('click');
12491249
expect(listeners.length).toBe(2);
12501250

12511251
button.dispatchEvent(clickEvent);
@@ -1254,7 +1254,7 @@ describe('Zone', function() {
12541254
eventTask !.zone.cancelTask(eventTask !);
12551255
logs = [];
12561256

1257-
listeners = button.eventListeners('click');
1257+
listeners = button.eventListeners !('click');
12581258
button.dispatchEvent(clickEvent);
12591259
expect(logs.length).toBe(1);
12601260
expect(listeners.length).toBe(1);
@@ -1796,7 +1796,7 @@ describe('Zone', function() {
17961796
function() {
17971797
let logs: string[] = [];
17981798
const listener1 = function() {
1799-
button.removeAllListeners('click');
1799+
button.removeAllListeners !('click');
18001800
logs.push('listener1');
18011801
};
18021802
const listener2 = function() { logs.push('listener2'); };
@@ -1819,7 +1819,7 @@ describe('Zone', function() {
18191819
function() {
18201820
let logs: string[] = [];
18211821
const listener1 = function() {
1822-
button.removeAllListeners('click');
1822+
button.removeAllListeners !('click');
18231823
logs.push('listener1');
18241824
};
18251825
const listener2 = function() { logs.push('listener2'); };
@@ -1843,7 +1843,7 @@ describe('Zone', function() {
18431843
let logs: string[] = [];
18441844
const listener1 = function() { logs.push('listener1'); };
18451845
const listener2 = function() {
1846-
button.removeAllListeners('click');
1846+
button.removeAllListeners !('click');
18471847
logs.push('listener2');
18481848
};
18491849
const listener3 = {handleEvent: function(event: Event) { logs.push('listener3'); }};
@@ -1866,7 +1866,7 @@ describe('Zone', function() {
18661866
let logs: string[] = [];
18671867
const listener1 = function() { logs.push('listener1'); };
18681868
const listener2 = function() {
1869-
button.removeAllListeners('click');
1869+
button.removeAllListeners !('click');
18701870
logs.push('listener2');
18711871
};
18721872
const listener3 = {handleEvent: function(event: Event) { logs.push('listener3'); }};
@@ -1892,7 +1892,7 @@ describe('Zone', function() {
18921892
const listener3 = {
18931893
handleEvent: function(event: Event) {
18941894
logs.push('listener3');
1895-
button.removeAllListeners('click');
1895+
button.removeAllListeners !('click');
18961896
}
18971897
};
18981898

@@ -1917,7 +1917,7 @@ describe('Zone', function() {
19171917
const listener3 = {
19181918
handleEvent: function(event: Event) {
19191919
logs.push('listener3');
1920-
button.removeAllListeners('click');
1920+
button.removeAllListeners !('click');
19211921
}
19221922
};
19231923

@@ -1946,7 +1946,7 @@ describe('Zone', function() {
19461946
button.addEventListener('click', listener3);
19471947
button.addEventListener('mouseover', listener4);
19481948

1949-
const listeners = button.eventListeners('click');
1949+
const listeners = button.eventListeners !('click');
19501950
expect(listeners.length).toBe(3);
19511951
expect(listeners).toEqual([listener1, listener2, listener3]);
19521952
button.removeEventListener('click', listener1);
@@ -1963,7 +1963,7 @@ describe('Zone', function() {
19631963
button.addEventListener('mouseover', listener2);
19641964
button.addEventListener('mousehover', listener3);
19651965

1966-
const listeners = button.eventListeners();
1966+
const listeners = button.eventListeners !();
19671967
expect(listeners.length).toBe(3);
19681968
expect(listeners).toEqual([listener1, listener2, listener3]);
19691969
button.removeEventListener('click', listener1);
@@ -1986,8 +1986,8 @@ describe('Zone', function() {
19861986
button.onmouseover = listener5;
19871987
expect((button as any)[Zone.__symbol__('ON_PROPERTYmouseover')]).toEqual(listener5);
19881988

1989-
button.removeAllListeners('mouseover');
1990-
const listeners = button.eventListeners('mouseover');
1989+
button.removeAllListeners !('mouseover');
1990+
const listeners = button.eventListeners !('mouseover');
19911991
expect(listeners.length).toBe(0);
19921992
expect((button as any)[Zone.__symbol__('ON_PROPERTYmouseover')]).toBeNull();
19931993
expect(!!button.onmouseover).toBeFalsy();
@@ -2017,8 +2017,8 @@ describe('Zone', function() {
20172017
button.addEventListener('mouseover', listener3, true);
20182018
button.addEventListener('click', listener4, true);
20192019

2020-
button.removeAllListeners('mouseover');
2021-
const listeners = button.eventListeners('mouseover');
2020+
button.removeAllListeners !('mouseover');
2021+
const listeners = button.eventListeners !('mouseover');
20222022
expect(listeners.length).toBe(0);
20232023

20242024
const mouseEvent = document.createEvent('Event');
@@ -2046,8 +2046,8 @@ describe('Zone', function() {
20462046
button.addEventListener('mouseover', listener3, true);
20472047
button.addEventListener('click', listener4, true);
20482048

2049-
button.removeAllListeners('mouseover');
2050-
const listeners = button.eventListeners('mouseove');
2049+
button.removeAllListeners !('mouseover');
2050+
const listeners = button.eventListeners !('mouseove');
20512051
expect(listeners.length).toBe(0);
20522052

20532053
const mouseEvent = document.createEvent('Event');
@@ -2077,8 +2077,8 @@ describe('Zone', function() {
20772077
button.onmouseover = listener5;
20782078
expect((button as any)[Zone.__symbol__('ON_PROPERTYmouseover')]).toEqual(listener5);
20792079

2080-
button.removeAllListeners();
2081-
const listeners = button.eventListeners('mouseover');
2080+
button.removeAllListeners !();
2081+
const listeners = button.eventListeners !('mouseover');
20822082
expect(listeners.length).toBe(0);
20832083
expect((button as any)[Zone.__symbol__('ON_PROPERTYmouseover')]).toBeNull();
20842084
expect(!!button.onmouseover).toBeFalsy();
@@ -2109,7 +2109,7 @@ describe('Zone', function() {
21092109
button.removeEventListener('mouseover', listener2);
21102110
button.removeEventListener('click', listener3);
21112111
button.removeEventListener('click', listener4);
2112-
const listeners = button.eventListeners('mouseover');
2112+
const listeners = button.eventListeners !('mouseover');
21132113
expect(listeners.length).toBe(0);
21142114

21152115
const mouseEvent = document.createEvent('Event');
@@ -2134,8 +2134,8 @@ describe('Zone', function() {
21342134
button.addEventListener('click', listener3);
21352135
(button as any)[Zone.__symbol__('addEventListener')]('click', listener4);
21362136

2137-
button.removeAllListeners();
2138-
const listeners = button.eventListeners('mouseover');
2137+
button.removeAllListeners !();
2138+
const listeners = button.eventListeners !('mouseover');
21392139
expect(listeners.length).toBe(0);
21402140

21412141
const mouseEvent = document.createEvent('Event');

0 commit comments

Comments
 (0)