From 790d4cab23414156e68e0836d7f558c7b6c41113 Mon Sep 17 00:00:00 2001 From: zhangenming <282126346@qq.com> Date: Sun, 29 Sep 2024 09:48:33 +0800 Subject: [PATCH 1/5] Update index.md --- files/en-us/web/api/eventtarget/addeventlistener/index.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/files/en-us/web/api/eventtarget/addeventlistener/index.md b/files/en-us/web/api/eventtarget/addeventlistener/index.md index 5817e85ffbcd5c0..38fa53e870b6db9 100644 --- a/files/en-us/web/api/eventtarget/addeventlistener/index.md +++ b/files/en-us/web/api/eventtarget/addeventlistener/index.md @@ -165,8 +165,7 @@ try { window.addEventListener("test", null, options); window.removeEventListener("test", null, options); -} catch (err) { - passiveSupported = false; +} catch { } ``` From 09e1235344ee574bf69602b321d3dc328c37f18b Mon Sep 17 00:00:00 2001 From: zhangenming <282126346@qq.com> Date: Sun, 29 Sep 2024 09:56:42 +0800 Subject: [PATCH 2/5] Update files/en-us/web/api/eventtarget/addeventlistener/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- files/en-us/web/api/eventtarget/addeventlistener/index.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/files/en-us/web/api/eventtarget/addeventlistener/index.md b/files/en-us/web/api/eventtarget/addeventlistener/index.md index 38fa53e870b6db9..19bbe0ac2013ccd 100644 --- a/files/en-us/web/api/eventtarget/addeventlistener/index.md +++ b/files/en-us/web/api/eventtarget/addeventlistener/index.md @@ -165,8 +165,7 @@ try { window.addEventListener("test", null, options); window.removeEventListener("test", null, options); -} catch { -} +} catch {} ``` This creates an `options` object with a getter function for the From 4f0377b1cc4c78db702efb8ba3344ee6e1e19bd2 Mon Sep 17 00:00:00 2001 From: zhangenming <282126346@qq.com> Date: Mon, 30 Sep 2024 09:18:44 +0800 Subject: [PATCH 3/5] Update index.md --- .../api/eventtarget/addeventlistener/index.md | 72 ------------------- 1 file changed, 72 deletions(-) diff --git a/files/en-us/web/api/eventtarget/addeventlistener/index.md b/files/en-us/web/api/eventtarget/addeventlistener/index.md index 19bbe0ac2013ccd..7742bd3e8dd55a9 100644 --- a/files/en-us/web/api/eventtarget/addeventlistener/index.md +++ b/files/en-us/web/api/eventtarget/addeventlistener/index.md @@ -133,78 +133,6 @@ function handleEvent(event) { } ``` -### Safely detecting option support - -In older versions of the DOM specification, the third parameter of -`addEventListener()` was a Boolean value indicating whether or not to use -capture. Over time, it became clear that more options were needed. Rather than adding -more parameters to the function (complicating things enormously when dealing with -optional values), the third parameter was changed to an object that can contain various -properties defining the values of options to configure the process of removing the event -listener. - -Because older browsers (as well as some not-too-old browsers) still assume the third -parameter is a Boolean, you need to build your code to handle this scenario -intelligently. You can do this by using feature detection for each of the options you're -interested in. - -For example, if you want to check for the `passive` option: - -```js -let passiveSupported = false; - -try { - const options = { - get passive() { - // This function will be called when the browser - // attempts to access the passive property. - passiveSupported = true; - return false; - }, - }; - - window.addEventListener("test", null, options); - window.removeEventListener("test", null, options); -} catch {} -``` - -This creates an `options` object with a getter function for the -`passive` property; the getter sets a flag, -`passiveSupported`, to `true` if it gets called. That -means that if the browser checks the value of the `passive` property on the -`options` object, `passiveSupported` will be -set to `true`; otherwise, it will remain `false`. We then call -`addEventListener()` to set up a fake event handler, specifying those -options, so that the options will be checked if the browser recognizes an object as the -third parameter. Then, we call [`removeEventListener()`](/en-US/docs/Web/API/EventTarget/removeEventListener) to clean up after -ourselves. (Note that `handleEvent()` is ignored on event listeners that -aren't called.) - -You can check whether any option is supported this way. Just add a getter for that -option using code similar to what is shown above. - -Then, when you want to create an actual event listener that uses the options in -question, you can do something like this: - -```js -someElement.addEventListener( - "mouseup", - handleMouseUp, - passiveSupported ? { passive: true } : false, -); -``` - -Here we're adding a listener for the {{domxref("Element/mouseup_event", "mouseup")}} -event on the element `someElement`. For the third parameter, if -`passiveSupported` is `true`, we're specifying an -`options` object with `passive` set to -`true`; otherwise, we know that we need to pass a Boolean, and we pass -`false` as the value of the `useCapture` parameter. - -You can learn more in the [Implementing feature detection](/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection) documentation and the explainer about -[`EventListenerOptions`](https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md#feature-detection) -from the [Web Incubator Community Group](https://wicg.github.io/admin/charter.html). - ### The value of "this" within the handler It is often desirable to reference the element on which the event handler was fired, From f934040a7b0a43fe2f718161270f3c2445bd036d Mon Sep 17 00:00:00 2001 From: Joshua Chen Date: Sun, 29 Sep 2024 23:38:56 -0400 Subject: [PATCH 4/5] Update index.md --- files/en-us/web/api/eventtarget/addeventlistener/index.md | 6 ------ 1 file changed, 6 deletions(-) diff --git a/files/en-us/web/api/eventtarget/addeventlistener/index.md b/files/en-us/web/api/eventtarget/addeventlistener/index.md index 7742bd3e8dd55a9..e41ea88571010ca 100644 --- a/files/en-us/web/api/eventtarget/addeventlistener/index.md +++ b/files/en-us/web/api/eventtarget/addeventlistener/index.md @@ -352,12 +352,6 @@ Since it can't be canceled, event listeners can't block page rendering anyway. See [Improving scroll performance using passive listeners](#improving_scroll_performance_using_passive_listeners) for an example showing the effect of passive listeners. -### Older browsers - -In older browsers that don't support the `options` parameter to -`addEventListener()`, attempting to use it prevents the use of the -`useCapture` argument without proper use of [feature detection](#safely_detecting_option_support). - ## Examples ### Add a simple listener From 29c670a2325afce6f4d60ba59466a786759d6c3e Mon Sep 17 00:00:00 2001 From: Joshua Chen Date: Sun, 29 Sep 2024 23:55:38 -0400 Subject: [PATCH 5/5] Update index.md --- files/en-us/web/api/eventtarget/addeventlistener/index.md | 4 ---- 1 file changed, 4 deletions(-) diff --git a/files/en-us/web/api/eventtarget/addeventlistener/index.md b/files/en-us/web/api/eventtarget/addeventlistener/index.md index e41ea88571010ca..90bf8bcdbf77a07 100644 --- a/files/en-us/web/api/eventtarget/addeventlistener/index.md +++ b/files/en-us/web/api/eventtarget/addeventlistener/index.md @@ -674,10 +674,6 @@ Click the outer, middle, inner containers respectively to see how the options wo {{ EmbedLiveSample('Example_of_options_usage', 600, 630) }} -Before using a particular value in the `options` object, it's a -good idea to ensure that the user's browser supports it, since these are an addition -that not all browsers have supported historically. See [Safely detecting option support](#safely_detecting_option_support) for details. - ### Event listener with multiple options You can set more than one of the options in the `options` parameter. In the following example we are setting two options: