通过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

对于JavaScript中的in循环,返回键,而不是值.要使for循环工作,假设您尚未向阵列添加自定义属性,您将执行以下操作:

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

另一种选择是使用委托处理程序将多个元素附加到单个事件侦听器

您可以将父侦听器附加到document任何适当的父节点。Element.matches()然后您可以使用API 或任何其他内容来检查事件是否由适当的目标引发event.target

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

这大致相当于以下用于.on()提供委托的jQuery 语法

$("#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 ...
});

堆栈片段中的演示

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;
}

Answer 3

您可以只添加一个侦听所有单选按钮的侦听器,而不是单个侦听器.

使用jquery,你可以这样做

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

演示

仅适用于带有id的表单中的无线电 formA

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

仅适用于带有ID的无线电 myradio

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

演示

Answer 4

一个好的开始,但不要用于..因为它将迭代所有可枚举的属性,你没有检查它们是否都代表元素.

使用索引要好得多:

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