JS事件委托学习（转）
JS 事件委托就是利用冒泡原理，把事件加到父级上触发，执行效果。
好处:
1.提高性能
2.新添加的元素还会有之前的事件
<ul id="ul">
<li>111111</li>
<li>22222</li>
<li>333333</li>
<li>444444</li>
</ul>
<li>111111</li>
<li>22222</li>
<li>333333</li>
<li>444444</li>
</ul>
这样一个HTML结构
我想要给LI增加一个鼠标点击的效果通常写法
window.onload = function(){
var oUl = document.getElementById("ul");
var oLi = oUl.getElementsByTagName("li")
for(var i = 0; i <oLi.length; i++){
oLi[i].onclick = function(){
alert(123)
}
}
}
var oUl = document.getElementById("ul");
var oLi = oUl.getElementsByTagName("li")
for(var i = 0; i <oLi.length; i++){
oLi[i].onclick = function(){
alert(123)
}
}
}
如果事件委托呢，我会把时间委托给ul 就把for 循环直接改
oUl.onclick = function(){
alert(1123)
}
alert(1123)
}
接下来我们想写过一个，给LI加一个鼠标经过的效果 默认我肯定会这样写：
window.onload = function(){
var oUl = document.getElementById("ul");
var oLi = oUl.getElementsByTagName("li")
for(var i = 0; i <oLi.length; i++){
oLi[i].onmouseover = function(){
this.style.background = "red"
}
oLi[i].onmouseout = function(){
this.style.background = ""
}
}
}
var oUl = document.getElementById("ul");
var oLi = oUl.getElementsByTagName("li")
for(var i = 0; i <oLi.length; i++){
oLi[i].onmouseover = function(){
this.style.background = "red"
}
oLi[i].onmouseout = function(){
this.style.background = ""
}
}
}
如果我用事件委托的写法:
event对象，事件源，无论你操作等你个对象的事件
event对象有兼容想
IE ：window.event.srcElement;
标准 ： event.target;
window.onload = function(){
var oUl = document.getElementById("ul");
var oLi = oUl.getElementsByTagName("li")
oUl.onmouseover = function(ev){
var ev = ev || window.event; //事件
var target = ev.targe || ev.srcElement; //事件源，不管在哪个事件中，只要你操作的那个元素就是事件源
if(ev.target.nodeName.toLocaleLowerCase()=="li"){ // 事件在LI 上面才执行增加背景颜色
ev.target.style.background = "red"
}
}
oUl.onmouseout = function(ev){
var ev = ev || window.event;
var target = ev.targe || ev.srcElement;
ev.target.style.background = ""
}
}
var oUl = document.getElementById("ul");
var oLi = oUl.getElementsByTagName("li")
oUl.onmouseover = function(ev){
var ev = ev || window.event; //事件
var target = ev.targe || ev.srcElement; //事件源，不管在哪个事件中，只要你操作的那个元素就是事件源
if(ev.target.nodeName.toLocaleLowerCase()=="li"){ // 事件在LI 上面才执行增加背景颜色
ev.target.style.background = "red"
}
}
oUl.onmouseout = function(ev){
var ev = ev || window.event;
var target = ev.targe || ev.srcElement;
ev.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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
window.onload = function(){
var oUl = document.getElementById("ul");
var oLi = oUl.getElementsByTagName("li")
var obtn = document.getElementById("input");
var iNow =4;
oUl.onmouseover = function(ev){
var ev = ev || window.event; //事件源，不管在哪个事件中，只要你操作的那个元素就是事件源
var target = ev.targe || ev.srcElement;
if(ev.target.nodeName.toLocaleLowerCase()=="li"){
ev.target.style.background = "red"
}
}
oUl.onmouseout = function(ev){
var ev = ev || window.event;
var target = ev.targe || ev.srcElement;
ev.target.style.background = ""
}
obtn.onclick=function(){
iNow++;
var oLi = document.createElement("li");
oLi.innerHTML = iNow * 11111;
oUl.appendChild(oLi)
}
}
</script>
</head>
<body>
<input type = "button" value= "增加" id = "input" />
<ul id="ul">
<li>111111</li>
<li>22222</li>
<li>333333</li>
<li>444444</li>
</ul>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
window.onload = function(){
var oUl = document.getElementById("ul");
var oLi = oUl.getElementsByTagName("li")
var obtn = document.getElementById("input");
var iNow =4;
oUl.onmouseover = function(ev){
var ev = ev || window.event; //事件源，不管在哪个事件中，只要你操作的那个元素就是事件源
var target = ev.targe || ev.srcElement;
if(ev.target.nodeName.toLocaleLowerCase()=="li"){
ev.target.style.background = "red"
}
}
oUl.onmouseout = function(ev){
var ev = ev || window.event;
var target = ev.targe || ev.srcElement;
ev.target.style.background = ""
}
obtn.onclick=function(){
iNow++;
var oLi = document.createElement("li");
oLi.innerHTML = iNow * 11111;
oUl.appendChild(oLi)
}
}
</script>
</head>
<body>
<input type = "button" value= "增加" id = "input" />
<ul id="ul">
<li>111111</li>
<li>22222</li>
<li>333333</li>
<li>444444</li>
</ul>
</body>
</html>
