在 DOM 事件上向函数发送参数

Question

我正在尝试向 javascript 事件上的函数调用发送参数。

在接收焦点的下拉菜单中，文本会根据传递给函数调用的参数在某处发生变化。

无法完成这项工作！任何帮助将不胜感激。

function changeText(x) {
  if (x) {
    document.querySelector('.focused').textContent = 'Focused';
  } else {
    document.querySelector('.focused').textContent = 'LOST';
  }
}

document.querySelector('.selector').onfocus = changeText(true);
document.querySelector('.selector').onfocusout = changeText(false);

<select class='selector'>
  <option value = 'one'>One</option>
  <option value = 'two'>Two</option>
</select>

<br />
<br />
<br />


<div class = 'focused'>XXX</div>

Answer 1

变化：我使用匿名函数来包装你的函数。我使用 addEventListener('focusin'/'focusout') 因为 "onfocusout" 在失去焦点时没有触发。

function changeText(x) {
  if (x) {
    document.querySelector('.focused').textContent = 'Focused';
  } else {
    document.querySelector('.focused').textContent = 'LOST';
  }
}

document.querySelector('.selector').addEventListener('focusin',function(){ changeText(true); });
document.querySelector('.selector').addEventListener('focusout',function(){ changeText(false); });

<select class='selector'>
  <option value = 'one'>One</option>
  <option value = 'two'>Two</option>
</select>

<br />
<br />
<br />


<div class = 'focused'>XXX</div>

在 DOM 事件上向函数发送参数

Sending arguments to a function on DOM event

javascript

css

onfocus