Javaｓｃｒｉｐｔ中的事件委托和利益

1、事件委托是什么：一般来说，事件是onclick，onmouseover和onmouseout事件，等，这是主要的，让别人做，这一事件是在某些元素的加入，但你必须做别人，完成这件事。

也就是说：使用冒泡的原则，将事件添加到父节点并触发执行效果。

好：1，提高性能。

我们可以看到一个例子：您需要触发每个LI更改其背景颜色。

aaaaaaaa
bbbbbbbb
cccccccc

在window.onload =函数（）{
VaR，= document.getelementbyid（UL）；
VaR阿里= oul.getelementsbytagname（礼）；
对于（var i = 0；i < ali.length；i++）{
ALi {我}。onmouseover =函数（）{
this.style.background =红色；
}
ALi {我}。onmouseout=函数（）{
this.style.background = ；
}
}
}

通过这种方式，我们可以在李上添加鼠标事件。

但是，如果我们在循环中可能有很多李，那么它更有可能影响性能。

在这里，我们可以使用事件委托来实现这一effect.html不变性

在window.onload =函数（）{
VaR，= document.getelementbyid（UL）；
VaR阿里= oul.getelementsbytagname（礼）；
*
事件源在这里使用：事件对象、事件源，不管事件是什么，只要您操作的元素是事件的源。
Ie：window.event.srcelement
在标准：event.target
NodeName：发现元素的标签名称
* /
oul.onmouseover =功能（EV）{
VaR EV = EV window.event | |；
VaR目标= ev.target ev.srcelement | |；
/ /警报（目标。innerHTML）；
如果（目标。它们。toLowerCase）（= = Li）{
target.style.background =红色；
}
}
oul.onmouseout =功能（EV）{
VaR EV = EV window.event | |；
VaR目标= ev.target ev.srcelement | |；
/ /警报（目标。innerHTML）；
如果（目标。它们。toLowerCase）（= = Li）{
target.style.background = ；
}
}
}

好处2，新增加的元素也有以前的事件。

我们还看到了这个示例，但是我们将动态添加李。

如：

aaaaaaaa
bbbbbbbb
cccccccc

我们将在没有事件的情况下做这件事：

在window.onload =函数（）{
VaR，= document.getelementbyid（UL）；
VaR阿里= oul.getelementsbytagname（礼）；
VaR的OBTN = document.getelementbyid（-）；
VAR现在= 4；
对于（var i = 0；i < ali.length；i++）{
ALi {我}。onmouseover =函数（）{
this.style.background =红色；
}
ALi {我}。onmouseout=函数（）{
this.style.background = ；
}
}
obtn.onclick =函数（）{
INow + +；
VaR OLI = document.createelement（礼）；
oli.innerhtml = 1111 *我现在；
oul.appendchild（OLI）；
}
}

通过这种方式，我们可以看到点击按钮被新添加到LI中而不移动鼠标到事件中以改变其背景颜色。

for循环已经执行，因为添加了单击。

所以我们用事件委托的方式来做它。

在window.onload =函数（）{
VaR，= document.getelementbyid（UL）；
VaR阿里= oul.getelementsbytagname（礼）；
VaR的OBTN = document.getelementbyid（-）；
VAR现在= 4；
oul.onmouseover =功能（EV）{
VaR EV = EV window.event | |；
VaR目标= ev.target ev.srcelement | |；
/ /警报（目标。innerHTML）；
如果（目标。它们。toLowerCase）（= = Li）{
target.style.background =红色；
}
}
oul.onmouseout =功能（EV）{
VaR EV = EV window.event | |；
VaR目标= ev.target ev.srcelement | |；
/ /警报（目标。innerHTML）；
如果（目标。它们。toLowerCase）（= = Li）{
target.style.background = ；
}
}
obtn.onclick =函数（）{
INow + +；
VaR OLI = document.createelement（礼）；
oli.innerhtml = 1111 *我现在；
oul.appendchild（OLI）；
}
}

好啊:

在我们使用微博的时候，新的微博有了以前的鼠标事件。

以上是Xiaobi介绍的Javaｓｃｒｉｐｔ事件委托和好处，我希望它能帮助你。如果你有任何问题，请给我留言，萧边会及时给您回复。谢谢您支持网站。