Question

我有一个容器，里面有一堆收音机和复选框。如何为容器创建onclick处理程序，以便在单击容器内的复选框或单选按钮时触发它？例如，单击可能会使容器更改其css类。比如，如果它没有“css_class1”，则会将此类添加到其中。

我想在纯JavaScript中这样做。

是否可以，或者我是否必须为每个复选框和收音机单独创建一个onclick处理程序？

Answer 1

您...向容器添加点击处理程序。

就是这样。

这就是点击处理程序的工作方式。

function handler(event) {
    alert("Click on " + event.target.tagName + " for handler on " + event.currentTarget.tagName);
}

document.querySelector("div").addEventListener("click", handler)

<div>
<input type="radio">
</div>

如果您希望它仅在单击其中一个输入时执行某些操作：在继续执行其余功能之前测试event.target.tagName的值。

Answer 2

我会尝试一些简单的方法，例如按类选择元素并为其创建一个on click处理程序。例如

var childrenElements = document.getElementByClass('children');
childrenElements.addEventListener("click", addClass());


function addClass(){
  childrenElements.classname="css_class1";
}

这段代码的作用是简单地将一个类应用于所有元素，但是如果你有兴趣单独应用这些类，我建议你通过id获取每个元素，因为这样做会导致一些烦人的问题。

创建一个onclick处理程序，在单击其任何子元素时触发

2 个答案: