javascript如何为一个节点的子节点添加事件
比如：<divid="aaa"><pid="p1">11</p><pid="p2">22</p><pid="p3">33</p><pid="p4">44</p></div...
比如：<div id="aaa">
<p id="p1">11</p>
<p id="p2">22</p>
<p id="p3">33</p>
<p id="p4">44</p>
</div>
1.我想单击aaa下的某个p节点，就弹出这个节点的次序或者id？
2.能不能为p节点添加事件属性呢？就是直接把把onclick=“test()”添加到p节点里？我只能为它添加id、class等，不知道能不能添加onclick属性？
菜鸟的我表示万分感谢！
呃。。。我的分不多，全部就这些了~~~害羞！ 展开
<p id="p1">11</p>
<p id="p2">22</p>
<p id="p3">33</p>
<p id="p4">44</p>
</div>
1.我想单击aaa下的某个p节点，就弹出这个节点的次序或者id？
2.能不能为p节点添加事件属性呢？就是直接把把onclick=“test()”添加到p节点里？我只能为它添加id、class等，不知道能不能添加onclick属性？
菜鸟的我表示万分感谢！
呃。。。我的分不多，全部就这些了~~~害羞！ 展开
4个回答
展开全部
自己把click处理方法绑定到div#aaa里，只要div#aaa里面有点击事件 这个事件就会冒泡冒上来。
这样做只需绑定一次就搞定了，不然每加个节点还要去设置onclick或绑定事件。。蛮烦！
绑定事件方法
//别告诉我你还在用IE8- IE8-只能用attachEvent相当不屑
document.getElementById("aaa").addEventListener("click",function(e){},false)
//false好像是从里面往外面冒泡 p>div>..body..>window，true为从外面玩里面冒 window>..body..>div>p 貌似是这样
//function里可以定义处理方法了，第一个参数为事件对象event,e.target为点击的对象
function(e){
if(e.target.tagName=="P")//判断一下是不是P标签，有可能是div或其他里面的陌生标签
alert(e.target.id);//显示p的ID
}
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
建议用jquery吧，采用的是事件监听来捕捉事件。
百度：jquery on 会有很多结果可以帮助你。
楼上回答很花心思，如果能把事件监听完善，就是你的要求了。
百度：jquery on 会有很多结果可以帮助你。
楼上回答很花心思，如果能把事件监听完善，就是你的要求了。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
function test(obj){
alert(obj.id);
// alert(obj.parentElement.id)
var parentObj = obj.parentElement;
for(var i=0;i<parentObj.children.length;i++){
if(obj===parentObj.children[i]){
alert(i);
break;
}
}
}
//-->
</SCRIPT>
<BODY>
<div id="aaa">
<p id="p1" onclick="test(this)">11</p>
<p id="p2" onclick="test(this)">22</p>
<p id="p3" onclick="test(this)" >33</p>
<p id="p4" onclick="test(this)">44</p>
</div>
</BODY>
</HTML>
追问
p标签是我动态创建的节点，所以里面没有“onclick”属性。。。烦恼就在这里呢~~~~
追答
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
</HEAD>
<BODY>
<div id="aaa">
<p id="p1" >11</p>
<p id="p2" >22</p>
<p id="p3" >33</p>
<p id="p4" >44</p>
</div>
<SCRIPT LANGUAGE="JavaScript">
<!--
function test(obj){
alert(obj.id);
var parentObj = obj.parentElement;
for(var i=0;i<parentObj.children.length;i++){
if(obj===parentObj.children[i]){
alert(i);
break;
}
}
}
var newtest = function(obj)
{
return function()
{
test(obj);//该函数为外部定义的一个执行函数；
}
}
function addEventSimple(obj,evt,fn){
if(obj.addEventListener){
obj.addEventListener(evt,fn,false);
}else if(obj.attachEvent){
obj.attachEvent('on'+evt,fn);
}
}
function setclick(obj){
for(var i=0;i<obj.children.length;i++){
addEventSimple( obj.children[i],'click',newtest(obj.children[i]));
}
}
var obj = document.getElementById('aaa');
setclick(obj);
//-->
</SCRIPT>
</BODY>
</HTML>
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
document.getElementById("aaa").document.getElementsByTagName("p").addEvent("onclick",test);
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
