Событие JavaScript Blur, не работающее над элементами, добавленными после загрузки DOM

Я пытаюсь преобразовать столько jQuery в родной JavaScript в проект, частично для изучения большего количества JS.

Ниже приведен код, который у меня есть. Расширяет текстовую область, когда Focus и Blur снова становятся маленькими.

Он отлично работает, за исключением одного поля textarea, которое вставляется в DOM после загрузки 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 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 уже загружен, и это то, что мне нужно воспроизвести, но в родном 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
источник поделиться
2 ответа

Прикрепите обработчики к документу и проверите 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">

Обратите внимание, что мы указали true для аргумента useCapture addEventListener(). Это необходимо для делегирования событий (в данном случае), поскольку blur и focus не являются пузырьковыми событиями.

См. Также: Element. classListElement. classList

+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>
+2
источник

Посмотрите другие вопросы по меткам или Задайте вопрос