JavaScript Blur事件不处理加载DOM后添加的项目

I am trying to convert as much jQuery into native JavaScript on a project, partially for learning more JS.

我试图在项目中将尽可能多的jQuery转换为本机JavaScript，部分用于学习更多JS。

Below is some code I have that Expands a text area when Focus and on Blur makes it small again.

下面是我的一些代码，当Focus和on Blur再次缩小时，扩展文本区域。

It works just fine except one textarea fields that are inserted into the DOM after the DOM is loaded, how can I make it work for those items as well without using jQuery?

除了在加载DOM之后插入到DOM中的一个textarea字段之外，它工作得很好，如何在不使用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";
        }
    }
})();

This jQuery version works perfectly, even for text fields added after the DOM has already loaded and that is what I need to reproduce but in native JavaScript that does not rely on other libraries like jQuery....

这个jQuery版本可以很好地工作，即使是在DOM已经加载之后添加的文本字段，这也是我需要重现的东西，但是在原生JavaScript中不依赖于其他库如jQuery ....

$(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")
});

2 个解决方案

#1

Attach the handlers to the document and check event.target to see if it has the appropriate class.

将处理程序附加到文档并检查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">

Note that we specified true for the addEventListener() useCapture argument. This is necessary for event delegation (in this case) because blur and focus are not bubbling events.

请注意，我们为addEventListener（）useCapture参数指定了true。这对于事件委派（在这种情况下）是必要的，因为模糊和焦点不是冒泡事件。

_{See also: Element.classList}

另请参见：Element.classList

#2

Why do you want to use javascript for this? Are you opposed to a CSS solution? You can target focused elements using the :focus selector:

为什么要使用javascript？你反对CSS解决方案吗？您可以使用：焦点选择器定位聚焦元素：

.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>

#1