检测哪个元素已更改/ keyup

Question

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

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

Answer 1

使用this（见下文）。

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

除了this（它不适用于箭头功能），您可以使用传递给该函数的event变量：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;