javascript - 带有输入 oninput 事件的事件委托(delegate)

Question

是否可以设置 oninput 事件委托(delegate)来更改 changeText div 的文本？

<div id="manyInputs">
    <div>
        <input type="text">
        <div class="changeText">

        </div>
    </div>
    <div>
        <input type="text">
        <div class="changeText">

        </div>
    </div>
    <div>
        <input type="text">
        <div class="changeText">

        </div>
    </div>
</div>

Answer 1

一个可行的普通 JS 解决方案是将“change”事件绑定(bind)到“manyInputs”div 并从事件处理程序中获取目标元素并寻找它的下一个兄弟元素。如果您不知道代码的结构，那么您还可以向输入添加一个数据 ID，然后使用该 ID 找到要将值添加到的文本 div。

HTML

<div id="manyInputs">
    <div>
        <input type="text">
        <span class="changeText"></span>
    </div>
    <div>
        <input type="text">
        <span class="changeText" ></span>
    </div>
    <div>
        <input type="text">
        <span class="changeText"></span>
    </div>
 </div>

Javascript

var inputs = document.getElementById('manyInputs');
inputs.addEventListener('change', function(e){
    var value = e.target.value;
    e.target.nextElementSibling.innerHTML = value;
});

JS fiddle :https://jsfiddle.net/s7wtevbu/

JS Fiddle with data-id 解决方案:https://jsfiddle.net/kas1h6xe/