1.传统的事件监听
html结构:
<ul id = "ul">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul
js:
window.onload=function(){
var myUl=document.getElementById('ul');
var list=myUl.getElementsByTagName('li');
for(var i=0;i<list.length;i++){
list[i].addEventListener('click',function(){
this.style.backgroundColor="black";
});
}
}
事件委托js:
window.onload=function(){
var myUl=document.getElementById('ul');
myUl.addEventListener('click',function(ev){
var ev= ev||window.ev;
if(ev.target.nodeName.toLocaleLowerCase()=='li'){
ev.target.style.backgroundColor="black";
}
});
}