事件委託：
1、什麼是事件委託： 什麼是事件呢？onclick,onmouseover,onmouseout,onfocus等就是事件 什麼是委託呢？就是自己做的事情委託給別人來做，也就是本來事件時加在自己身上，你卻把事件加在別人身上，來解決這個事件
優點一：提高性能：
Demo1:
給每個li 綁定了一個鼠標經過事件
window.οnlοad=function(){
var oDemo = document.getElementById('ul');
var aLi = oDemo.getElementsByTagName('li');
for(var i=0; i<aLi.length; i++){
aLi[i].onmouseover = function(){
this.style.background="red";
}
aLi[i].onmouseout = function(){
this.style.background="";
}
}
}上面案例反應一個問題，當我們在開發的時候for循環多個鼠標經過li出現的事件，會影響性能
下面我們就講如何使用事件委託來解決問題：
注意：
這裏涉及到事件源： 事件源是event對象下的，不管在那個事件中，只要你操作的那個元素就是事件源；
IE : window.event.srcElement;
標準下 : event.target;
nodeName: 元素的標籤名;oDemo.οnmοuseοver=function(ev){
var oEv = ev || window.event;
var target = oEv.target || oEv.srcElement;
if(target.nodeName.toLowerCase() == 'li'){
target.style.background="red";
}
}
oDemo.οnmοuseοut=function(ev){
var oEv = ev || window.event;
var target = oEv.target || oEv.srcElement;
if(target.nodeName.toLowerCase() == 'li'){
target.style.background="";
}
}優點二：新添加的元素 還有事件<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style>
body{
margin: 0;
}
</style>
</head>
<body>
<button id="btn1">添加</button>
<ul id="ul">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script>window.οnlοad=function(){
var oDemo = document.getElementById('ul');
var aLi = oDemo.getElementsByTagName('li');
var oBtn = document.getElementById('btn1');
var iNow=5;
oDemo.οnmοuseοver=function(ev){
var oEv = ev || window.event;
var target = oEv.target || oEv.srcElement;
if(target.nodeName.toLowerCase() == 'li'){
target.style.background="red";
}
}
oDemo.οnmοuseοut=function(ev){
var oEv = ev || window.event;
var target = oEv.target || oEv.srcElement;
if(target.nodeName.toLowerCase() == 'li'){
target.style.background="";
}
}
//新添加的元素 還有事件
oBtn.οnclick=function(){
iNow++;
var oLi = document.createElement('li');
oLi.innerHTML=1 * iNow;
oDemo.appendChild(oLi);
}
}
</script>
</body>
</html>
