Return 使用 event.target 修改了一组项目（全局 div）中的项目

Question

我们假设我们有以下 div 和以下元素：

    <div id="globalDiv" onchange="checkChange()">
        <input id="i1" type='number'/>
        <input id="i2" type='number'/>
        <input id="i3" type='number'/>
        <input id="i4" type='number'/>
        <input id="i5" type='number'/>
        <input id="i6" type='number'/>
    </div>

我的问题是：我可以知道 'input' 类型的哪个元素被修改了吗？

注：

I know that one solution is to place the onchange = "checkChange (this)" in each input but I see it redundant.

Answer 1

您可以使用 event.target 让元素在您想要的任何事件上触发，例如变化：

const myEl = document.querySelector("#globalDiv");

myEl.addEventListener('change', function(event) {
 console.log(event.target);
})

 <div id="globalDiv">
   <input id="i1" type='number'/>
   <input id="i2" type='number'/>
   <input id="i3" type='number'/>
   <input id="i4" type='number'/>
   <input id="i5" type='number'/>
   <input id="i6" type='number'/>
</div>

Return 使用 event.target 修改了一组项目（全局 div）中的项目

Return modified item in a set of items (global div) using event.target

html

javascript

onchange