var ul = document.querySelector("ul");var lis = document.querySelectorAll("li");
ul.onclick=function(eve){var target = eve.target || window.target;
console.log(target);//<li>i</li>
console.log(target.nodeName);//LIif(target.nodeName =='LI'){
console.log(target.innerHTML);//li的文本内容}
2.非事件委托:
var lis = document.querySelectorAll("li");var p = document.querySelector("p");//通过循环多次绑定子节点达到效果for(var i =0; i < lis.length; i++){
lis[i].onclick=function(eve){var eve = eve || window.event;//event考虑兼容var target = eve.target || window.srcElement;//target考虑兼容
p.innerHTML = target.style.backgroundColor;;
p.style.color =target.style.backgroundColor;;}}
3.用事件委托达到相同效果:
var ul = document.querySelector("ul");var lis = document.querySelectorAll("li");var p = document.querySelector("p");//不需要通过for循环,减少了dom节点的绑定操作
ul.onclick=function(eve){var target = eve.target;if(target.nodeName =="LI"){
p.innerHTML = target.style.backgroundColor;
p.style.color = target.style.backgroundColor;}}