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

Question

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

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

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?

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

$(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

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

 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.

_{See also: Element. classList Element. classList}

Answer 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:

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