通过事件侦听器传递附加参数

Question

这段代码： var messageLine = "this is a line of text";

myTextField.addEventListener('change', textHasBeenChanged, false);

调用此函数：

function textHasBeenChanged(e) { var target = e.target; messageLine = target.value;}

现在我想传递一条额外的数据...就像一个简单的数字 1。像这样：

myTextField.addEventListener('change', function(){textHasBeenChanged(theValueOfTheTextField, theNumber1);});

如何做到这一点？我仍然是一个编程新手，所以请让您的答案尽可能接近您在上面看到的语法。

Answer 1

您可以 call/invoke 通过传递附加参数在匿名函数内部调用函数。您还可以考虑使用 input 事件而不是 change，它会在 <input>、<select> 或 <textarea> 元素的值发生更改时同步触发：

var messageLine = "this is a line of text";
var myTextField = document.getElementById('myTextField');
myTextField.addEventListener('input', function(){textHasBeenChanged(event, 1)}, false);


function textHasBeenChanged(e, other) { 
  var target = e.target;
  messageLine = target.value;
  
  console.clear(); //clear the previous data in console
  console.log(messageLine);
  console.log(other);
}

<input id="myTextField"/>

Answer 2

如果您之后不打算关闭 even 监听器，那么您应该能够将参数直接传递给您要提供给事件监听器的函数

myTextField.addEventListener('change', textHasBeenChanged(1), false);

您不必为事件传递 e，因为当向事件侦听器提供命名函数时，e 已被假定为第一个参数

通过事件侦听器传递附加参数

Passing additional parameter through Event Listener

javascript

addeventlistener

textfield