事件委托
“事件代理”即是把原本需要绑定的事件委托给父元素，让父元素担当事件监听的职务。事件代理的原理是DOM元素的事件冒泡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul id="uul">
<li id="add">AAA</li>
<li>BBB</li>
<li>CCC</li>
</ul>
<input type="button" name="" id="btn" value="添加" />
<ul id="ul1">
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ul>
<script>
//冒泡原理做事件委托 缺点：就是冒泡 哈哈哈
/*window.onload=function () {
var ull=document.getElementById("uul");
ull.onclick=function () {
alert("111");
}
}*/
//target 只有点击相应li才有用 不会冒泡
window.onload=function () {
var ull = document.getElementById("uul");
ull.onclick = function (ev) {
console.dir(ev)
//console.dir(ev.target.innerHTML);
console.dir(ev)
var ev=ev||window.event;
var target=ev.target||ev.srcElement;
if(target.nodeName.toLowerCase()=="li"){
console.log(target.innerHTML);
}
}
}
//根据不同的事件处理
/*if(target.nodeName.toLocaleLowerCase() == 'input'){
switch(target.id){
case 'add' :
alert('添加');
break;
case 'remove' :
alert('删除');
break;
case 'move' :
alert('移动');
break;
case 'select' :
alert('选择');
break;
}
}*/
//使用事件委托，后添加元素/后添加的dom，同样有事件
window.onload=function () {
var oBtn=document.getElementById("btn");
var oUl=document.getElementById("ul1");
var aLi=oUl.getElementsByTagName("li");
var num=4;
oUl.onmouseover=function (ev) {
var ev=ev||window.event;
var target=ev.target||ev.srcElement;
if(target.nodeName.toLowerCase()=="li"){
target.style.background="red";
}
}
oUl.onmouseout=function (ev) {
var ev=ev||window.event;
var target=ev.target||ev.srcElement;
if(target.nodeName.toLowerCase()=="li"){
target.style.background="#fff";
}
}
oBtn.onclick=function () {
num++;
var oLi=document.createElement("li");
oLi.innerHTML=111*num;
oUl.appendChild(oLi);
}
}
</script>
</body>
</html>
