Присоедините слушатель события через javascript к переключателю

Question

У меня есть несколько переключателей с одинаковым именем.Например:

<form name="formA">
<input type="radio" name="myradio" value="A"/>
<input type="radio" name="myradio" value="B"/>
<input type="radio" name="myradio" value="C"/>
<input type="radio" name="myradio" value="D"/>
</form>

Теперь мне нужно добавить прослушиватель событий через javascript для всех переключателей.Если приведенный ниже псевдокод неверен, подскажите, пожалуйста, как это сделать -

var radios = document.forms["formA"].elements["myradio"];
  for(radio in radios) {
    radio.onclick = function() {
        alert(radio.value);
    }
}

Answer 1

Для циклов in в JavaScript возвращаются ключи, а не значения. Чтобы цикл for in работал, предполагая, что вы не добавили пользовательские свойства в ваш массив, вам нужно сделать:

for(radio in radios) {
    radios[radio].onclick = function() {
        alert(this.value);
    }
}

Но вы должны всегда зацикливать массив с помощью регулярного цикла for, чтобы избежать случайного добавления пользовательских перечисляемых свойств:

var radios = document.forms["formA"].elements["myradio"];
for(var i = 0, max = radios.length; i < max; i++) {
    radios[i].onclick = function() {
        alert(this.value);
    }
}

Answer 2

Хорошее начало, но не используйте for .. таким способом, поскольку он будет перебирать все перечисляемые свойства, и вы не проверили, все ли они представляют элементы.

Гораздо лучше использоватьиндекс:

for (var i=0, iLen=radios.length; i<iLen; i++) {
  radios[i].onclick = function() {...};
} 

Answer 3

Вы можете добавить только одного слушателя, который слушает все переключатели, а не отдельных слушателей.

с помощью jquery, вы можете сделать это следующим образом

$(document).ready(function(){
    $('input[type=radio]').click(function(){
        alert(this.value);
    });
});

Демо

Только для радио в форме с идентификатором formA

 $(document).ready(function(){
        $('#formA input[type=radio]').click(function(){
            alert(this.value);
        });
    });

Только для радио с идентификатором myradio

$(document).ready(function(){
    $('input[type=radio]').click(function(){
        if (this.id == "myradio")
            alert(this.value);
    });
});

Демо

Answer 4

for(var property in object) { ... } 

используется для зацикливания объектов для поиска свойств.для массива вы можете использовать обычный цикл

for(var i=0; i< radios.length; i++) {
     var radio = radios[i];
     ....
} 

Answer 5

Другой вариант - присоединить несколько элементов к одному прослушивателю событий с помощью делегированных обработчиков

Вы можете присоединить родительский слушатель к document или любому подходящему родительскому узлу. Затем вы можете проверить, было ли событие вызвано соответствующей целью, используя API Element.matches() или что-нибудь на event.target

document.getElementById("languages").addEventListener('click', function (event) {
    if (event.target && event.target.matches("input[type='radio']")) {
        // do something here ...
    }
});

Это примерно эквивалентно следующему синтаксису jQuery, который использует .on() для обеспечения делегирования

$("#languages").on("click", "input[type='radio']", function(event) {
    // do something here ...
});

Если вы хотите расширить прототип EventTarget.addEventListener(), вы можете обернуть его собственным методом:

window.EventTarget.prototype.addDelegatedListener = function(type, delegateSelector, listener) {
    this.addEventListener(type, function (event) {
        if (event.target && event.target.matches(delegateSelector)) {
            listener.call(event.target, event)
        }
    });
}

Тогда используйте вот так:

document.addDelegatedListener("click", "input[type='radio']", function(event) {
    // do something here ...
});

Демонстрация в фрагментах стека

// example 1 - regular add event listener
document.getElementById("languages").addEventListener('click', function (event) {
    if ( event.target && event.target.matches("input[type='radio']") ) {
        console.log(event.target.value)
    }
});

// example 2 - reusable delegated listener
window.EventTarget.prototype.addDelegatedListener = function(type, delegateSelector, listener) {
    this.addEventListener(type, function (event) {
        if (event.target && event.target.matches(delegateSelector)) {
            listener.call(event.target, event)
        }
    });
}

let parent = document.getElementById("weekdays")
parent.addDelegatedListener("click", "input[type='radio']", function(event) {
    console.log(this.value)
});

h3 {
    margin-top: 20px;
    margin-bottom: 10px;
    font-size: 1.1em;
}
code {
    background: #e9e9e9;
    padding: 1px 4px;
    border-radius: 3px;
}
label input {
    vertical-align: text-top;
}

<h3>Languages <code>addEventListener</code> + <code>Element.matches</code></h3>
<div id="languages">
  <label><input type="radio" name="languages" value="HTML"> HTML </label>
  <label><input type="radio" name="languages" value="JS"> JS </label>
  <label><input type="radio" name="languages" value="CSS"> CSS </label>
</div>

<h3>Weekdays <code>EventTarget.prototype.addDelegatedListener</code></h3>
<div id="weekdays">
  <label><input type="radio" name="days" value="Mon"> Mon </label>
  <label><input type="radio" name="days" value="Tue"> Tue </label>
  <label><input type="radio" name="days" value="Wed"> Wed </label>
</div>