Skip to content
Open
Changes from all 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
Update warnings about event handler attributes
Added the implicit `with` statement wrapping that event handler attributes do, and the issues that come with it
  • Loading branch information
addsoupbase authored Dec 11, 2025
commit b78eaa75ee22bcff553ef4a99e36f97afdfa012e
17 changes: 17 additions & 0 deletions files/en-us/web/html/reference/attributes/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -1432,6 +1432,23 @@ To be clear, the values `"true"` and `"false"` are not allowed on boolean attrib
> [!WARNING]
> The use of event handler content attributes is discouraged. The mix of HTML and JavaScript often produces unmaintainable code, and the execution of event handler attributes may also be blocked by content security policies.

> [!WARNING]
> While not visible by calling the `Function.prototype.toString()` method on the handler, event handler attributes will implicitly wrap code inside of 2 `with` statements, and may produce unexpected results. For example:
> ```html
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[mdn-linter] reported by reviewdog 🐶

Suggested change
> ```html
>
> ```html

> <div onclick="console.log(new URL(location))">Bad Example</div>
> ```
> Essentially becomes:
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[mdn-linter] reported by reviewdog 🐶

Suggested change
> Essentially becomes:
>
> Essentially becomes:

> ```js example-bad
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[mdn-linter] reported by reviewdog 🐶

Suggested change
> ```js example-bad
>
> ```js example-bad

> function onclick(event) {
> with(this.ownerDocument) {
> with(this) {
Comment on lines +1443 to +1444
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[mdn-linter] reported by reviewdog 🐶

Suggested change
> with(this.ownerDocument) {
> with(this) {
> with (this.ownerDocument) {
> with (this) {

> console.log(new URL(location)); // 'URL' now resolves to document.URL instead of window.URL
> // TypeError: URL is not a constructor
> }
> }
> }
> ```

In addition to the attributes listed in the table above, global [event handlers](/en-US/docs/Web/API/Document_Object_Model/Events#using_onevent_properties) — such as [`onclick`](/en-US/docs/Web/API/Element/click_event) — can also be specified as [content attributes](#content_versus_idl_attributes) on all elements.

All event handler attributes accept a string. The string will be used to synthesize a [JavaScript function](/en-US/docs/Web/JavaScript/Reference/Functions) like `function name(/*args*/) {body}`, where `name` is the attribute's name, and `body` is the attribute's value. The handler receives the same parameters as its JavaScript event handler counterpart — most handlers receive only one `event` parameter, while `onerror` receives five: `event`, `source`, `lineno`, `colno`, `error`. This means you can, in general, use the `event` variable within the attribute.
Expand Down
Loading