addEventListener调用了一个函数，但该函数只能工作一次，不能再次调用

Question

我正在尝试制作一个函数，如果我点击眼睛，密码就会变成文本，如果你再次点击，眼睛就会闭合。我可能会将这个函数用于其他输入，所以我将函数分离，所以我不使用下面eye.onclick=function(){...};是我的代码的方式，但我的代码只工作一次，第一次单击它时，眼睛睁开，但再次单击，眼睛无法闭合，是不是我需要删除EventLister？

var password = document.getElementById('passWord');
var eye = document.querySelector('#eye');
var flag = 0;
var eyeOpen = function(obj,eyes,flag){
if (flag===0){
eyes.className="eye_open";
obj.type = 'text';
flag=1;
}else{
eyes.className = "eye_close";
obj.type = 'password';
flag = 0; 
}
}
eye.addEventListener('click', function () { 
eyeOpen(password,eye,flag);
});

Answer 1

请参阅此处的讨论：在JavaScript中通过引用传递变量。问题是，当您想直接更改flag时，您正在传递0。

var password = document.getElementById('passWord')
var eye = document.getElementById('eye')
var flag = 0
var eyeOpen = function(obj, eyes) {
if (flag === 0) {
eyes.className= 'eye_open'
obj.type = 'text'
flag = 1
} else {
eyes.className = 'eye_close'
obj.type = 'password'
flag = 0
}
}
eye.addEventListener('click', function () {
eyeOpen(password, eye)
})

这样做的缺点是，如果在多个地方重用此代码，则可能需要跟踪多个标志。与其这样做，您可以检查classList(或输入类型)，这意味着要跟踪的变量减少了一个：

var password = document.getElementById('passWord')
var eye = document.getElementById('eye')
var eyeOpen = function (obj, eyes) {
var isOpen = eyes.classList.contains('eye_open')
// This would also work:
// var isOpen = obj.type === 'text'
if (isOpen) {
eyes.className = 'eye_close'
obj.type = 'password'
} else {
eyes.className= 'eye_open'
obj.type = 'text'
}
}
eye.addEventListener('click', function () {
eyeOpen(password, eye)
})

Answer 2

var password = document.getElementById('passWord');
var eye = document.querySelector('#eye');
var flags=[0] //index based stuff
//if you have another eye..
//flags.push(0)
function openEye(index,password){
flags[index]++
if(flags[index]%2){password.type="text"}
else{password.type="password"}
}
eye.addEventListener('click',function(){
openEye(0,password) //for each eye the values can change :|
})

<input id="passWord" type="password"/>
<button id="eye">THE EYE</button>