检测哪个元素已更改/键控

Question

从这段代码中，如何检测哪个元素被更改/键控？

$("select, input").on('change keyup', function() {
    ...
});

Answer 1

使用this(见下文(。

this是受影响的HTMLElement(事件的目标(的实例。要获取标记，请使用this.tagName：

$("select, input").on('change keyup', function() {
    console.log('Affected element:', this.tagName, this.getAttribute('id'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" value="one" id="one">
<br>
<input type="text" value="two" id="two">
<br>
<select id="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

Answer 2

除了 this(不适用于箭头函数(之外，您还可以使用传递给函数的 event 变量：

$("select, input").on('change keyup', (e) => {
    console.log('Affected element:', e.currentTarget);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" value="one" id="one">
<br>
<input type="text" value="two" id="two">
<br>
<select id="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>