父元素不能捕获input的focus事件？

发布于
2018-04-09

在一次实验中突然发现，父元素通过addeventlisten不能捕获input的focus事件。但是click事件可以正常捕获。查了很多资料，并没有发现原因，有没有大佬能解答一下？

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


<div id="parent">

    <p>第1条元素</p>
    <p>第2条元素</p>
    <p>第3条元素</p>
    <p>第4条元素</p>
    <p>第5条元素</p>


    <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("#parent");
    var bb = function () {

    };
    
    bb.prototype.control = function () {
        
        aa.addEventListener("blur", function (e) {

            console.log(e);

        })

    }

    var cc = new bb;

    cc.control();


</script>

</body>
</html>

图片描述