加载DOM后添加的项目上无法执行JavaScript模糊事件

Question

我正在尝试将一个项目上的jQuery转换为本机JavaScript，部分目的是为了学习更多JS。

下面是一些我具有的代码，当“焦点”和“模糊”使它再次变小时，它会扩展文本区域。

它工作得很好，除了在加载DOM之后将一个textarea字段插入DOM之外之外，如何在不使用jQuery的情况下使其也适用于这些项目呢？

(function() {

    var descriptions = document.querySelectorAll('.edit_description');

    for (var i = 0; i < descriptions.length; i++){
        descriptions[i].addEventListener('blur', handler, false);
        descriptions[i].addEventListener('focus', handler, false);
    }

    //descriptions.addEventListener('blur', handler, false);
    //descriptions.addEventListener('focus', handler, false);

    function handler(event) {
        if (event.type === "blur") {
            // It's a blur event
            this.setAttribute("style","height:18px;");
            this.style.height = "18px";
        }
        else {
            // It must be a focus event
            this.setAttribute("style","height:10em;");
            this.style.height = "10em";
        }
    }
})();

这个jQuery版本非常完美，即使对于已加载DOM之后添加的文本字段，这也是我需要重现的内容，但是在不依赖其他库（例如jQuery）的本机JavaScript中。...

$(document).on("focus", "textarea.edit_description", function() {
    $(this).addClass("expanding")
    $(this).animate({
        height: "10em"
    }, 500);
});
$(document).on("blur", "textarea.edit_description", function() {
     $(this).animate({
         height: "18px"
     }, 500);
     $(this).removeClass("expanding")
});

Answer 1

将处理程序附加到文档并检查event. target event. target以查看其是否具有适当的类。

 function handler(e) { // check that the event target has the desired class if (e.target.classList.contains("edit-description")) { console.log("%s %o", e.type, e.target); } } // add handlers using the useCapture argument document.addEventListener("blur", handler, true); document.addEventListener("focus", handler, true); // add another input to the DOM var input = document.createElement("input"); input.id = "b"; input.className = "edit-description"; document.body.insertBefore(input, document.body.children[1]); 

 <input id="a" class="edit-description"> 

请注意，我们为addEventListener() useCapture参数指定了true 。 对于事件委托（在这种情况下），这是必需的，因为blur和focus不会使事件冒泡。

_{另请参阅： Element. classList Element. classList}

Answer 2

为什么要为此使用javascript？ 您是否反对CSS解决方案？ 您可以使用:focus选择器定位目标元素：

 .edit-description { height: 1em; display: block; } .edit-description:focus { height: 10em; } 

 <textarea class="edit-description"></textarea> <textarea class="edit-description"></textarea> <textarea class="edit-description"></textarea>