下面是添加 监听事件
的步骤。
- 获取需要添加事件的数组元素。
- 最好先判断一下是否已获取到元素,使用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();
}
})
}