您当前的位置： 首页 > 学无止境 > JS经典实例 网站首页JS经典实例

javascript事件篇-事件代理(委托)、冒泡、事件源的综合应用

发布时间：2017-01-01 15:02:23编辑：雪饮阅读（）

 利用事件委托进行性能优化:以实现鼠标离开与悬停为例

<input type="button" value="添加元素" id="add"/>
<ul id="xy">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script type="text/javascript">
window.onload=function (){
var oinput=document.getElementById("add");
var ul=document.getElementById("xy");
oinput.onclick=function(){
var lis=ul.getElementsByTagName("li");
var li_item=document.createElement("li");
li_item.innerHTML=lis.length+1;
ul.appendChild(li_item);
}
//通过ul代理（委托）li的悬停与离开事件
ul.onmouseover=function(evt){
var evt=evt||window.event;
var target=evt.target||evt.srcElement;
//通过事件源的节点名称来判断，并只对li标签处理
if(target.nodeName=='LI'){
target.style.background='pink';
}
};
ul.onmouseout=function(evt){
var evt=evt||window.event;
var target=evt.target||evt.srcElement;
if(target.nodeName=='LI'){
target.style.background='';
}
};
}
</script>