JavaScript Blur 事件不适用于加载 DOM 后添加的项目

Question

我正在尝试在一个项目中将尽可能多的 jQuery 转换为原生 JavaScript，部分是为了学习更多的 JS。

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

除了在加载 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";
        }
    }
})();

这个 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.@987654321@ 以查看它是否具有适当的类。

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.@987654323@}

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>