入力oninputイベントを使用したイベント委任

Question

changeText divのテキストを変更するには、どういうわけかoninputイベント委任を設定することはできますか？

<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

これを行う最も簡単な方法は、jqueryの.keyup()機能を使用することです。あなたはどちらのJavaScriptイベント "からkeyup" にイベントハンドラをバインドし、または要素にそのイベントをトリガすることができます。..

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/

Answer 2

バニラJSソリューションは、 "change"イベントを "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フィドル：データ-IDソリューションとhttps://jsfiddle.net/s7wtevbu/

JSフィドル：https://jsfiddle.net/kas1h6xe/