江苏龙网

  1. 主页 > 生活百科 > >

JavaScript 之事件委托方式 两个小例子

JavaScript

例子一 ：点击每一个li，显示对应li中数据【JavaScript 之事件委托方式 两个小例子】<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; //默认事件，兼容ie e.target=e.target || e.srcELement; //e.target 当前触发的节点 if(e.target.nodeName.toLowerCase()=="li") {console.log(e.target.innerHTML);// console.log(e.target.childNodes[0].nodeValue); }}例子二 ：按钮点击显示/隐藏，当点击其他空白位置的时候，详细内容隐藏<div > <span id="btn" style="border:1px solid red">查看详情</span> <p id="info" style="display:none;">信息内容展示</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'; }}



    推荐阅读


    上一篇：梦见生了两个儿子是什么征兆 梦见生了2个儿子是什么意思

    下一篇：PHP理论知识之12种排序算法的比较