事件代理(事件委托)
简述
事件代理就是在我们为一批元素添加事件的时候,可以将事件委托给父元素来触发事件。
优点
- 节省内存
- 可以对所有父元素下的子元素添加事件(包括原有的和后来添加的)
实例
<body>
<ul id="oul">
<li>我是第一个li</li>
<li>我是第二个li</li>
<li>我是第三个li</li>
<li>我是第四个li</li>
<li>我是第五个li</li>
</ul>
<input type="button" value="添加" id="btn">
</body>
当我们想为 li标签 添加一个鼠标划上某一个 li 时改变背景颜色这一事件的时候,我们有许多种方法,我们可以利用css的hover可以实现:
li{
background:yellow;
border-bottom:3px solid blue;
}
li:hover{
background:red;
}
但是此方法在 ie6 并不适用,由于我们需要兼容所有浏览器,所以我们将其弃用,然后我们可以采用 js 方法进行实现:
我们利用 js 为 li标签添加事件
var lis = document.getElementsByTagName("li");
for(var i=0,l=lis.length;i<l;i++){
lis[i].onmouseover = function () {
this.className = "oli";
}
lis[i].onmouseout = function () {
this.className = "";
}
}
我们可以这样将事件直接添加到 li标签 上,但是这样需要执行12次事件,对内存损耗较大。并且这样添加事件后,还有另外一种缺点,比如你需要在已有的 li标签 后添加新的 li标签 ;这样新添加的 li标签 并不能执行前面的事件。代码如下:
var btn = document.getElementById("btn");
var oul = document.getElementById("oul");
btn.onclick = function (){
var newli = document.createElement("li");
newli.innerHTML="新添加li";
oul.appendChild(newli);
}
所以我们需要利用到事件代理
oul.onmouseover = function (e) {
var oEvent = e||window.event;
var nodeli = oEvent.target||oEvent.srcElement;
nodeli.className = "oli"
}
oul.onmouseout = function (e) {
var oEvent = e||window.event;
var nodeli = oEvent.target||oEvent.srcElement;
nodeli.className = ""
}
因为我们需要兼容ie,所以我们需要这种兼容的写法
var oEvent = e||window.event;
var nodeli = oEvent.target||oEvent.srcElement;
这样我们就解决了上面的问题。
你懂了吗?
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。