例子一 :点击每一个li,显示对应li中数据
<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';
}
}
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。