How to use addEventBubbleListenerWithPassiveFlag method in Playwright Internal

Best JavaScript code snippet using playwright-internal

Run Playwright Internal automation tests on LambdaTest cloud grid

Perform automation testing on 3000+ real desktop and mobile devices online.

EventListener.js

Source: EventListener.js Github

copy
1  function addEventBubbleListener(target, eventType, listener) {
2    target.addEventListener(eventType, listener, false);
3    return listener;
4  }
5  function addEventCaptureListener(target, eventType, listener) {
6    target.addEventListener(eventType, listener, true);
7    return listener;
8  }
9  function addEventCaptureListenerWithPassiveFlag(target, eventType, listener, passive) {
10    target.addEventListener(eventType, listener, {
11      capture: true,
12      passive: passive
13    });
14    return listener;
15  }
16  function addEventBubbleListenerWithPassiveFlag(target, eventType, listener, passive) {
17    target.addEventListener(eventType, listener, {
18      passive: passive
19    });
20    return listener;
21  }
Full Screen

DOMPluginEventSystem.js

Source: DOMPluginEventSystem.js Github

copy
1import { DOCUMENT_NODE } from '../../../HTMLNodeType';
2import { IS_NON_DELEGATED, IS_CAPTURE_PHASE } from './EventSystemFlags';
3
4import { getEventListenerSet } from '../client/ReactDOMComponentTree';
5import { allNativeEvents } from './EventRegistry';
6import { createEventListenerWrapperWithPriority } from './ReactDOMEventListener';
7import {
8  addEventCaptureListener,
9  addEventBubbleListener,
10  addEventBubbleListenerWithPassiveFlag,
11  addEventCaptureListenerWithPassiveFlag,
12} from './EventListener';
13
14const listeningMarker = '_reactListening' + Math.random().toString(36).slice(2);
15
16const mediaEventTypes = [
17  'abort',
18  'canplay',
19  'canplaythrough',
20  'durationchange',
21  'emptied',
22  'encrypted',
23  'ended',
24  'error',
25  'loadeddata',
26  'loadedmetadata',
27  'loadstart',
28  'pause',
29  'play',
30  'playing',
31  'progress',
32  'ratechange',
33  'seeked',
34  'seeking',
35  'stalled',
36  'suspend',
37  'timeupdate',
38  'volumechange',
39  'waiting',
40];
41
42const nonDelegatedEvents = new Set([
43  'cancel',
44  'close',
45  'invalid',
46  'load',
47  'scroll',
48  'toggle',
49  ...mediaEventTypes,
50]);
51
52const getListenerSetKey = (domEventName, capture) =>
53  `${domEventName}__${capture ? 'capture' : 'bubble'}`;
54
55const addTrappedEventListener = (
56  targetContainer,
57  domEventName,
58  eventSystemFlags,
59  isCapturePhaseListener
60) => {
61  const listener = createEventListenerWrapperWithPriority(
62    targetContainer,
63    domEventName,
64    eventSystemFlags
65  );
66  let isPassiveListener;
67
68  if (
69    domEventName === 'touchstart' ||
70    domEventName === 'touchmove' ||
71    domEventName === 'wheel'
72  ) {
73    isPassiveListener = true;
74  }
75
76  if (isCapturePhaseListener) {
77    if (isPassiveListener !== undefined) {
78      addEventCaptureListenerWithPassiveFlag(
79        targetContainer,
80        domEventName,
81        listener,
82        isPassiveListener
83      );
84    } else {
85      addEventCaptureListener(targetContainer, domEventName, listener);
86    }
87  } else {
88    if (isPassiveListener !== undefined) {
89      addEventBubbleListenerWithPassiveFlag(
90        targetContainer,
91        domEventName,
92        listener,
93        isPassiveListener
94      );
95    } else {
96      unsubscribeListener = addEventBubbleListener(
97        targetContainer,
98        domEventName,
99        listener
100      );
101    }
102  }
103};
104
105const listenToNativeEvent = (
106  domEventName,
107  isCapturePhaseListener,
108  rootContainerElement,
109  targetElement,
110  eventSystemFlags = 0
111) => {
112  let target = rootContainerElement;
113
114  if (
115    domEventName === 'selectionchange' &&
116    rootContainerElement.nodeType !== DOCUMENT_NODE
117  ) {
118    target = rootContainerElement.ownerDocument;
119  }
120
121  if (
122    targetElement !== null &&
123    !isCapturePhaseListener &&
124    nonDelegatedEvents.has(domEventName)
125  ) {
126    if (domEventName !== 'scroll') {
127      return;
128    }
129    eventSystemFlags |= IS_NON_DELEGATED;
130    target = targetElement;
131  }
132
133  const listenerSet = getEventListenerSet(target);
134  const listenerSetKey = getListenerSetKey(
135    domEventName,
136    isCapturePhaseListener
137  );
138
139  if (!listenerSet.has(listenerSetKey)) {
140    if (isCapturePhaseListener) {
141      eventSystemFlags |= IS_CAPTURE_PHASE;
142    }
143    addTrappedEventListener(
144      target,
145      domEventName,
146      eventSystemFlags,
147      isCapturePhaseListener
148    );
149    listenerSet.add(listenerSetKey);
150  }
151};
152
153const listenToAllSupportedEvents = (rootContainerElement) => {
154  if (rootContainerElement[listeningMarker]) return;
155
156  rootContainerElement[listeningMarker] = true;
157
158  allNativeEvents.forEach((domEventName) => {
159    if (!nonDelegatedEvents.has(domEventName)) {
160      listenToNativeEvent(domEventName, false, rootContainerElement, null);
161    }
162
163    listenToNativeEvent(domEventName, true, rootContainerElement, null);
164  });
165};
166
167const listenToNonDelegatedEvent = (domEventName, targetElement) => {
168  const isCapturePhaseListener = false;
169  const listenerSet = getEventListenerSet(targetElement);
170  const listenerSetKey = getListenerSetKey(
171    domEventName,
172    isCapturePhaseListener
173  );
174  if (!listenerSet.has(listenerSetKey)) {
175    addTrappedEventListener(
176      targetElement,
177      domEventName,
178      IS_NON_DELEGATED,
179      isCapturePhaseListener
180    );
181    listenerSet.add(listenerSetKey);
182  }
183};
184
185export {
186  mediaEventTypes,
187  nonDelegatedEvents,
188  getListenerSetKey,
189  listenToNativeEvent,
190  listenToAllSupportedEvents,
191  listenToNonDelegatedEvent,
192};
193
Full Screen

Accelerate Your Automation Test Cycles With LambdaTest

Leverage LambdaTest’s cloud-based platform to execute your automation tests in parallel and trim down your test execution time significantly. Your first 100 automation testing minutes are on us.

Try LambdaTest

Run JavaScript Tests on LambdaTest Cloud Grid

Execute automation tests with Playwright Internal on a cloud-based Grid of 3000+ real browsers and operating systems for both web and mobile applications.

Test now for Free
LambdaTestX

We use cookies to give you the best experience. Cookies help to provide a more personalized experience and relevant advertising for you, and web analytics for us. Learn More in our Cookies policy, Privacy & Terms of service

Allow Cookie
Sarah

I hope you find the best code examples for your project.

If you want to accelerate automated browser testing, try LambdaTest. Your first 100 automation testing minutes are FREE.

Sarah Elson (Product & Growth Lead)