同じクラスから入力要素の1つの値を取得する方法は？

私のsnippetです。同じクラスから入力要素の1つの値を取得する方法は？

クラスのすべての要素にイベントリスナーを追加する以外の方法はありますか。
可能であればループを避けたいです。あなたは（この場合<body>で）親要素に単一のリスナーを添付して、DOMノードを取得するにはevent.target属性を使用することができHTMLCollection

var user_input = document.getElementsByClassName('inp'); 
 
[].forEach.call(user_input, function(el) { 
 
    el.addEventListener("keyup", function(event) { 
 
    event.preventDefault(); 
 
    if (event.keyCode == 13) { 
 
     console.log(this.value); //this keyword in the handler function refers to element on which event is invoked! 
 
    } 
 
    }); 
 
});

<input type="text" class="inp"> 
 
<input type="text" class="inp"> 
 
<input type="text" class="inp">

出典

2016-10-07 PhoxKiD

他の方法はありません！ – Rayon

その後、最適な方法は何ですか？ – PhoxKiD

はい、あなたが提供している方法はありません、なぜあなたはIDのを使用しないでください –

私はジェイソンCEMRAにコメントを追加することができませんでした。

PhoxKiDが要求するターゲット要素は、彼/彼女の答えに加えて、クラス 'inp'の入力です。だから条件を置く

document.getElementById("parent").addEventListener("keyup", function (event){ 
    if(event.target.className == 'inp') { 
     //your code 
    } 
    else{ //for other inner elements 
     event.preventDefault(); //prevents the default action 
     event.stopPropagation(); //stop bubbling up 
    } 
}

出典

2016-10-07 07:14:38 Bishwa

PhoxKiDの要望通り、Jason Cemraのアプローチはループ/反復なしです – Bishwa

素晴らしいです！バブルは何を意味しますか？ – PhoxKiD

オブジェクトからトリガされたイベントは、オブジェクトの親に向かってバブル（パス）します。 Jason Cemraの答えでは、イベントは入力オブジェクトからトリガされ、そのイベントはバブルアップして親によって処理されます。ここでは、上記のコードでは、クラス名 'inp'の入力からイベントがトリガーされない場合、 'event.stopPropagation（）;'イベントを殺したり、気泡を飛び出させて気泡が泡立つことを防ぎます。 – Bishwa

使用[].forEach.call()イベントが発砲した

これは、イベントがDOM階層をバブルするためです。

コード例：：

HTML：

<div id="parent"> 
    <input type="text" class="inp"> 
    <input type="text" class="inp"> 
    <input type="text" class="inp"> 
</div>

0123それは、これらのリンクを参照してください

"イベント委譲"

と呼ばれています

JavaScriptは：

document.getElementById("parent").addEventListener("keyup", function (event) { 
    console.log(event.target.value) 
}

出典

2016-10-07 06:41:59

クール、 @ Rayonによって提案されたように – PhoxKiD

ねえ！あなたがどこかからコピーしたようだ/ ...フォーマットも同じです：P – Rayon

@Rayon、this line [] .forEach.call（user_input、function（el）はursからです.. rest私のPCで作業していましたこれを使って、私はループを試していました –

を反復処理する

出典

2016-10-07 06:42:14

親に多くの他の要素が存在する可能性があります... – Rayon

どのように内部要素をターゲットにしますか？ – PhoxKiD

同じクラスから入力要素の1つの値を取得する方法は？

答えて

関連する問題