Question

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

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' />

Answer 2

尝试通过回调函数调用

import flexjson.JSONDeserializer;
import flexjson.JSONSerializer;
import flexjson.transformer.DateTransformer;

public String toJson(User entity) {
        return new JSONSerializer().transform(new DateTransformer("MM/dd/yyyy HH:mm:ss"), java.util.Date.class)
       .include("wantedField1","wantedField2")
                .exclude("unwantedField1").serialize(entity);
}

Answer 3

在函数中使用关键字“ this”来引用对象（inputElements [index]）就足够了，无需传递索引。

javascript eventlistener函数参数

3 个答案: