Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Remove unnecessary code #36099

Merged
merged 5 commits into from
Sep 30, 2024
Merged
Changes from 3 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
74 changes: 0 additions & 74 deletions files/en-us/web/api/eventtarget/addeventlistener/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -133,80 +133,6 @@
}
```

### 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 (err) {
passiveSupported = false;
}
```

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,
Expand Down Expand Up @@ -430,7 +356,7 @@

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).

Check failure on line 359 in files/en-us/web/api/eventtarget/addeventlistener/index.md

View workflow job for this annotation

GitHub Actions / check_url_issues

URL fragment in URL 'web/api/eventtarget/addeventlistener#safely_detecting_option_support' is broken

## Examples

Expand Down Expand Up @@ -756,7 +682,7 @@

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.

Check failure on line 685 in files/en-us/web/api/eventtarget/addeventlistener/index.md

View workflow job for this annotation

GitHub Actions / check_url_issues

URL fragment in URL 'web/api/eventtarget/addeventlistener#safely_detecting_option_support' is broken

### Event listener with multiple options

Expand Down
Loading