The parent element cannot capture the focus event of input?

in an experiment, it was suddenly found that the parent element could not capture the focus event of input through addeventlisten. However, click events can be captured normally. Checked a lot of information, but did not find the reason, is there a boss can answer?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<div id="parent">

    

1

2

3

4

5

<input type="text" value="1"> <input type="text" value="2"> <input type="text" value="3"> <input type="text" value="4"> <input type="text" value="5"> </div> <script> var aa = document.querySelector("-sharpparent"); var bb = function () { }; bb.prototype.control = function () { aa.addEventListener("blur", function (e) { console.log(e); }) } var cc = new bb; cc.control(); </script> </body> </html>

Mar.02,2021

focus is not bubbling


by default, div cannot get focus and cannot trigger focus and blur events
how to make div trigger blur events: you can add the tabindex attribute to div

<div id="parent" tabindex="0">

because these two events do not bubble. For more information on
, see MDN
clipboard.png

.
Menu