Add description of relatedTarget to focusin/focusout event #2309
Comments
|
@SetTrend Very helpful bug report! Thank you! |
sideshowbarker
added
the
help wanted
The following code sample shows that this is not true, at least not now:- <!DOCTYPE html>
<html lang="en-US" charset="utf-8">
<head>
</head>
<body>
<form id="form">
<input type="text" placeholder="text input">
<input type="password" placeholder="password">
</form>
</body>
<script type="text/javascript">
const form = document.querySelector('input[type="password"]');
form.addEventListener('focus', (event) => {
event.target.style.background = 'pink';
console.log('focus: ' + String(event.relatedTarget));
});
form.addEventListener('focusin', (event) => {
event.target.style.background = '';
console.log('focusin: ' + String(event.relatedTarget));
});
form.addEventListener('blur', (event) => {
event.target.style.background = '';
console.log('blur: ' + String(event.relatedTarget));
});
form.addEventListener('focusout', (event) => {
event.target.style.background = '';
console.log('focusout: ' + String(event.relatedTarget));
});
</script>
</html>focus: [object HTMLInputElement] test.html:16:17
focusin: [object HTMLInputElement] test.html:21:17
blur: [object HTMLInputElement] test.html:26:17
focusout: [object HTMLInputElement] test.html:31:17The only difference between those events as per the W3C documentation is in
What fixes, if any, should be made for this issue? |
sideshowbarker
added
needs info
|
Closing for lack of response |
|
Not so fast! There are people out here who are working on business projects for their living, not having time to reply to you immediately just because you are having a slice of free spare time available. You cannot come back to a ole thread after two years of idleness and expect to get a response immediately. Please re-open. |
|
Apologies for this. Thanks for your time and feedback on this issue. |
Not your fault — mine for closing this issue prematurely. Anyway, I’ll take this opportunity to tell you that I think the work you’ve been doing on issue triage and technical review of issues has been immensely helpful for the project — including the attention you’ve paid to getting some longstanding (and in some cases long-neglected…) issues the attention they’ve needed |
|
So true. I, on my part, will make sure to get back on this issue til end of the month. |
|
I now tested the new behaviour of The behaviour of these events in regards to
So, it seems like there is no difference anymore between Considering thorough documentation on these events: When is |
Request type
Details
According to W3C documentation on UI events, the main feature of
focusinandfocusoutevents is that therelatedTargetproperty is set to the corresponding counter-element in theFocusEventargument of these two events, whereas withfocusandblurevents, therelatedTargetproperty is always null.Shouldn't this important feature be mentioned in the docs of the corresponding MDN help pages?
Many people wonder why the
relatedTargetproperty is alwaysnullwhen they listen tofocus/blur, not knowing there arefocusin/focusoutevents available.I'd like to suggest to add this information (and "see also" references between these four events) to the corresponding MDN pages.
Related Pages on MDN
https://developer.mozilla.org/en-US/docs/Web/API/Element/focusin_event
https://developer.mozilla.org/en-US/docs/Web/API/Element/focusout_event
https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event
https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event
The text was updated successfully, but these errors were encountered: