-
Notifications
You must be signed in to change notification settings - Fork 23k
Update warnings about event handler attributes #42347
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
base: main
Are you sure you want to change the base?
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
Added the implicit `with` statement wrapping that event handler attributes do, and the issues that come with it
- Loading branch information
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|
|
|
@@ -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 | ||||||||||
| > <div onclick="console.log(new URL(location))">Bad Example</div> | ||||||||||
| > ``` | ||||||||||
| > Essentially becomes: | ||||||||||
|
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. [mdn-linter] reported by reviewdog 🐶
Suggested change
|
||||||||||
| > ```js example-bad | ||||||||||
|
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. [mdn-linter] reported by reviewdog 🐶
Suggested change
|
||||||||||
| > function onclick(event) { | ||||||||||
| > with(this.ownerDocument) { | ||||||||||
| > with(this) { | ||||||||||
|
Comment on lines
+1443
to
+1444
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. [mdn-linter] reported by reviewdog 🐶
Suggested change
|
||||||||||
| > 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. | ||||||||||
|
|
||||||||||
There was a problem hiding this comment.
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 🐶