例子一 :點(diǎn)擊每一個(gè)li,顯示對應(yīng)li中數(shù)據(jù)
<ul id="uls"> <li>111</li> <li>222</li> <li>333</li> <li>444</li> </ul> //jq寫法 $("ul li").each(function(){ $(this).click(function(){ console.log($(this).html()); }) }) //js原始寫法 var list=document.getElementById("uls"); var li=list.getElementsByTagName('li'); for(var i=0;i<li.length;i++){ li[i].onclick=function(){ console.log(this.innerHTML); } } //事件委托方式 var list=document.getElementById("uls"); var li=list.getElementsByTagName('li'); list.onclick=function(e){ var e=e || window.event; //默認(rèn)事件,兼容ie e.target=e.target || e.srcELement; //e.target 當(dāng)前觸發(fā)的節(jié)點(diǎn) if(e.target.nodeName.toLowerCase()=="li") { console.log(e.target.innerHTML); // console.log(e.target.childNodes[0].nodeValue); } }
例子二 :按鈕點(diǎn)擊顯示/隱藏,當(dāng)點(diǎn)擊其他空白位置的時(shí)候,詳細(xì)內(nèi)容隱藏
<div > <span id="btn" style="border:1px solid red">查看詳情</span> <p id="info" style="display:none;">信息內(nèi)容展示</p> </div> var info=document.getElementById('info'); document.body.onclick=function(e){ var e=e || window.event; e.target=e.target || e.srcELement; if(e.target.id=='btn'){ if(info.style.display=='none' || info.style.display==''){ info.style.display='block'; }else{ info.style.display='none'; } }else{ info.style.display='none'; } }