为一个数组中的每一个节点添加监听事件

下面是添加 监听事件的步骤。

1. 获取需要添加事件的数组元素。
2. 最好先判断一下是否已获取到元素，使用for循环进行遍历，为每一个节点添加监听事件（此处以onclick事件为例）

function test(){
          
   
	console.log("我就是子节点被触发时要执行的方法~")
}
// 此处通过getElement有多种方法可以获取到节点，此处以DOM Name为例
let nodeList = document.getElementByName("DomName");
//检测节点是否存在
if(nodeList){
          
   
	for(let i = 0;i < nodeList.length; i++){
          
   
		//遍历节点，当节点被点击时，调用function
		nodeList[i].onclick = test;
	}
}

补充一种方法，是在觉得自己想的第一种方法通过有点笨笨，又检索出了下面这种方法，代码更加简洁，性能也会提升一些。这种方法就是通过事件委托来绑定。

事件委托的机制源于冒泡，比如一个ul列表下有几千个li需要添加监听事件，这种情况如果一个一个通过遍历来添加事件时比较麻烦的。这个时候如果使用事件冒泡的话，在点击li元素时，事件就会冒泡到ul上，所以直接为ul添加点击事件就可以了，无论点击那个li都能触发方法。 在使用这个方法时也要注意区分点击的到底是哪个li，就需要获取点击li的id来区分了。

下面先举个例子，ul里面有几千个li，当我点击其中一个li时，希望改变其样式，就可以用下面的代码实现。

let ul = document.getElementById(ul);
ul.addEventlistener(click,function(e){
          
   
	let id = e.target.getAttribute(id);
	let li = document.getElementById(id);
	li.classList.add(newClassName);
},false)

用事件委托的方法后，最上面绑定方法的代码就可以改写为：

function test(){
          
   
	console.log("我就是子节点被触发时要执行的方法~")
}
// 此处通过getElement有多种方法可以获取到节点，此处以DOM Name为例
let nodeList = document.getElementByName("DomName");
//检测节点是否存在
if(nodeList){
          
   
	nodeList.addEventListener(click,function(e){
          
   
		e = e || window.event;
		let oneNode = e.target;
		if(oneNode){
          
   
			oneNode.test();		
		}
	})
}