javascript 事件监听器函数参数

Question

我正在尝试使用带有参数的 inputListener 函数将事件监听器添加到 html 上的输入元素，如下所示。但这种方法行不通。我不明白为什么我无法将参数传递给事件监听器函数。

for (let index = 0; index<inputElements.length; index ++) {
  inputElements[index].addEventListener("input",inputListener(index));
}

function inputListener(index){
  if (inputElements[index].value.length>=5) {
      inputElements[index].style.border="none";
  }
  else{
       inputElements[index].style.border="solid 3px red";
 }
}`

Answer 1

您需要使用 this 从事件监听器内访问元素引用，而不是通过在监听器函数中传递 index 来访问。由于您正在验证 input 元素内的文本长度，因此您可以使用 keyup 事件监听器来验证文本的长度。

var inputElements = document.querySelectorAll('input');
for (let index = 0; index<inputElements.length; index ++) {
  inputElements[index].addEventListener("keyup",inputListener);
}

function inputListener(){
  if (this.value.length>=5) {
      this.style.border="none";
  }
  else{
       this.style.border="solid 3px red";
 }
}

<input type='text' />
<input type='text' />
<input type='text' />
<input type='text' />
<input type='text' />
<input type='text' />
<input type='text' />