带有输入 oninput 事件的事件委托答案

【问题标题】：Event delegation with input oninput event带有输入 oninput 事件的事件委托
【发布时间】：2017-08-22 01:13:11
【问题描述】：

是否可以通过某种方式设置oninput 事件委托来更改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>

【问题讨论】：

标签： javascript input event-delegation

【解决方案1】：

最简单的方法是使用 jquery 的.keyup() 函数。它允许您将事件处理程序绑定到“keyup”JavaScript 事件，或在元素上触发该事件..

HTML：

<div id="manyInputs">
  <div>
    <input id="input1" type="text" data-div-id="divForInput1">
    <div id="divForInput1" class="changeText"></div>
  </div>
  <div>
    <input id="input2" type="text" data-div-id="divForInput2">
    <div id="divForInput2" class="changeText"></div>
  </div>
  <div>
    <input id="input3" type="text" data-div-id="divForInput3">
    <div id="divForInput3" class="changeText"></div>
  </div>
</div>

Javascript：

<script>
  $(document).ready(function() {
    $('input[type="text"]').keyup(function() {
       $('#' + $(this).attr('data-div-id')).text($(this).val());
    });
  });
</script>

你可以试试我在 jsfiddle 中制作的这个例子（确保你点击了顶部的“运行”按钮）：

https://jsfiddle.net/gLxxj21h/1/

【讨论】：

这种方式我需要设置许多事件处理程序，但是否有可能只为多个输入使用 1 个事件处理程序？如果可能的话，在香草 JS 中
那么几件事。 1.）您需要向要写入的 div 添加某种标识符。 2.) 您需要为 keyup 绑定到类或 css 选择器“input[type=text]”。这样它就绑定到所有输入。以这个 jsfiddle 为例：jsfiddle.net/gLxxj21h
我不建议在普通的 js 中这样做

【解决方案2】：

一个可行的 vanilla JS 解决方案是将“更改”事件绑定到您的“manyInputs”div，并从事件处理程序中获取目标元素并寻找它的下一个兄弟元素。如果您不知道代码的结构，那么您还可以在输入中添加一个 data-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 小提琴：https://jsfiddle.net/s7wtevbu/

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

【讨论】：