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

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

  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();		
		}
	})
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值