JavaScript AddEventListener仅触发一次

Question

I have the following HTML

...
    <div class="content-row"><div class="col-md-4"></div>
            <div class="col-md-4">
                <form>
                    <div id='undiv' class="form-group"><label for="uname">Name:</label><input id="uname" type="text" class="form-control"/></div>
                    <div class="form-group"><label for="email">Email (optional):</label><input id="email" type="text" class="form-control" /></div>
                    <div class="form-group"><label for="gamecode">Game Code:</label><input id="gamecode" type="text" class="form-control" /></div>
                    <div class="form-group pull-right"><input id="join" type="button" value="Join" class="btn btn-primary btn-lg btn btn-primary btn-lg" /></div>
                </form>
            </div><div class="col-md-4"></div>
    </div>
....

Javascript below the HTML in body

<script type='text/javascript'>
            var uname = document.getElementById("uname");
            var email = document.getElementById("email");
            var gamecode = document.getElementById("gamecode");
            var joinbtn = document.getElementById("join");
            var notify = document.getElementById("notify");
            var undiv = document.getElementById("undiv");
...


    uname.addEventListener("blur",function(evt) {
                console.log('onblur');
                var un = uname.value;
                console.log(un);
                if(un.length >= 2) {
                    undiv.className += " has-success has-feedback";
                    undiv.innerHTML += '<span id="mark" class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>';
                }
                else {
                    undiv.className += " has-error has-feedback";
                    undiv.innerHTML += '<span id="mark" class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>';
                }
                //uname.value = un;
            });

            uname.addEventListener("focus",function(evt) {
                console.log('onfocus');
                undiv.className = "form-group";
                var mark = document.getElementById("mark");
                if(mark !=null) {
                    mark.parentNode.removeChild(mark);      
                    console.log("mark="+mark);  
                }   
            });
    </script>

The uname on onfocus and onblur events fire only once.

I have another eventListener on the button click event and it works fine.

I don't understand why focus and blur eventListeners don't fire whenever the event happens ?

The debugger on Chrome and Firefox show no errors or warning... And I don't understand What is going wrong ?

http://jsfiddle.net/ddf5h2nu/

Answer 1

A good practice is to keep a ruler on your desk, and if you find yourself typing element.innerHTML += "..." , just grab the ruler and smack the back of your hand.

;-)

Seriously though, using += after .innerHTML is very destructive and unnecessary and as you can see leads to unexpected results.

The other answer shows how to do it with DOM creation methods, which is a good way, but if you want to use HTML markup, then use .insertAdjacentHTML() instead of .innerHTML .

uname.addEventListener("blur",function(evt) {
    console.log('onblur');
    var un = uname.value;
    console.log(un);
    if(un.length >= 2) {
        undiv.className += " has-success has-feedback";
        undiv.insertAdjacentHTML("beforeend", '<span id="mark" class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>');
    }
    else {
        undiv.className += " has-error has-feedback";
        undiv.insertAdjacentHTML("beforeend", '<span id="mark" class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>');
    }
    //uname.value = un;
});

You'll notice that the first argument is "beforeend" and the second is your HTML. The .insertAdjacentHTML() method accepts four different strings as the first argument. They are as follows:

• "beforebegin" (put the markup before the element)
• "afterbegin" (put the markup inside the element at the beginning)
• "beforeend" (put the markup inside the element at the end)
• "afterend" (put the markup after the element)

So there are four positions where the HTML can be inserted relative to the element on which the method is invoked. These don't destroy any existing elements, which is why it's better than .innerHTML .

Answer 2

When you change undiv 's innerHTML attribute, you are causing the <input> element to be re-created from the HTML, thus losing the event listener.

This is a good alternative:

var newItem = document.createElement('span');
newItem.id = 'mark';
newItem.className = 'glyphicon glyphicon-ok form-control-feedback';
newItem.setAttribute('aria-hidden', true);
undiv.appendChild(newItem);

Fiddle