javascript - 不使用 jquery 监听 onkeyup 和 onchange

Question

我有一个带有 <input> 的表单输入数据时的字段 .onkeyup触发一个函数。不过我也有一个<select>下拉框，当然浏览器不会触发 .onkeyup更改时发生的事件。我的代码目前是

var formInput = document.getElementById('Form');

formInput.onkeyup = function(e){
    //do stuff
}

我怎样才能包含.onchange至formInput.onkeyup不使用jquery

Answer 1

您只需分配两个事件属性即可监听这两个事件。

var formInput = document.getElementById('Form');

formInput.onkeyup = formInput.onchange = function(e) {
  e.stopPropagation();
  let el = e.target.id;
  console.log(`${e.type} on ${el}`);
}

<form id="Form">
  <input type="text" id="textInput">
  <select id="menu">
    <option>Select an option</option>
    <option>1</option>
    <option>2</option>
  </select>
</form>

在函数中，e.type 将为 keyup 或 change，e.target 将为告诉您事件发生在哪个元素上。