前端----通过js给相同class的元素添加事件

写网页时我们可能一组元素增加一个相同的事件,

比如下图的下拉菜单中每项都有一个鼠标悬停事件和鼠标悬出事件(onmouseover和onmouseout事件)

不会的同学可以看看介绍这两个事件的一个小实例博客

https://blog.csdn.net/q5706503/article/details/82843997

效果很简单, 鼠标指到选项时背景色变成灰色,悬出时背景色再变白,

问题是一个页面有很多下拉菜单, 很多很多项很多标签怎么给他们全加上相同的事件

当然可以在HTML里给每个标签填上相同的事件属性, 即使是复制粘贴也很累, 而且增加了没必要的代码量

这里介绍的是用js给相同class的元素添加事件

我们可以给这些标签添加相同的class,再获取该class的对象 循环修改样式

 

 

获得某class的所有对象的方法: (返回的是数组)

var list=document.getElementsByClassName('li_new');

for循环给list对象数组的每个对象添加悬停和悬出事件:

for(var i in list)
{
	list[i].onmouseover=grayBack;
	list[i].onmouseout=noGrayBack;
}

注意上边的代码, 赋给事件的是函数名,  并没有参数的括号和参数,那样会出错,

除了赋函数名还可以在等号后直接定义函数, 可以通过在函数体内传参, 关于这个我有另一篇博客介绍了:

https://blog.csdn.net/q5706503/article/details/82989804

再定义两个函数修改背景色:

function grayBack()
{
	this.style.backgroundColor="rgb(204, 204, 204)";
}
function noGrayBack()
{
	this.style.backgroundColor="white";
}

函数中的this关键字指的是触发这个事件的标签元素对象

做到这示范给class添加事件就完了,但是这个例子并没有涉及到传参数,

并不能在参数名后加()填入参数会导致绑定失败,大家可以看看我上边的博客连接!