[英]Javascript AddEventListener Fires only once
我有以下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>
....
body
HTML下方的Javascript
<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>
该uname
上onfocus
和onblur
事件触发一次。
我在button click event
上有另一个eventListener
,它工作正常。
我不明白为什么每次事件发生时focus
和blur
事件eventListeners
都不会触发?
Chrome和Firefox上的调试器未显示任何错误或警告...而且我不明白这是怎么回事?
一个好的做法是将一把尺子放在桌子上,如果您发现自己输入element.innerHTML += "..."
,则只需抓住尺子并and一下手背即可。
;-)
严重的是,在.innerHTML
之后使用+=
非常具有破坏性,并且不必要,并且可以看到导致意外结果的结果。
另一个答案显示了如何使用DOM创建方法来做到这一点,这是一个好方法,但是如果您要使用HTML
标记,请使用.insertAdjacentHTML()
而不是.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;
});
您会注意到第一个参数是"beforeend"
,第二个参数是您的HTML。 .insertAdjacentHTML()
方法接受四个不同的字符串作为第一个参数。 它们如下:
"beforebegin"
(将标记放在元素之前) "afterbegin"
(将标记放在元素的开头) "beforeend"
(将标记放在元素的末尾) "afterend"
(将标记放在元素之后) 因此,相对于调用该方法的元素,可以在四个位置插入HTML。 这些不会破坏任何现有元素,这就是为什么它比.innerHTML
更好的原因。
更改undiv
的innerHTML
属性时,将导致从HTML重新创建<input>
元素,从而丢失事件侦听器。
这是一个很好的选择:
var newItem = document.createElement('span');
newItem.id = 'mark';
newItem.className = 'glyphicon glyphicon-ok form-control-feedback';
newItem.setAttribute('aria-hidden', true);
undiv.appendChild(newItem);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.