js给所有子节点绑定事件

<ul><li>sadada</li><li>sadada</li><li>sadada</li></ul>给ul的子节点li绑定click事件用脚本实现不能在写成这样<... <ul><li>sadada</li><li>sadada</li><li>sadada</li></ul>
给ul的子节点li绑定click事件用脚本实现不能在写成这样<li onclick="func()">
你好我通过这样实现了(主要实现的是点击选中当前节点,同时其它节点不选中)
page.onload(function() {
var tab=$("Tool-Button").get("li");
for(var i=0;i<tab.length;i++) {
$(tab[i]).onclick=function(){
for(var k=0;k<tab.length;k++) {
$(tab[k]).CSS("");
}
$(this).CSS("navon");
}
}
}
);(page.onload()是模拟的window.onload)
但是换成这样的方式绑定一直没成功还麻烦高手指点下谢谢了
page.onload(function() {
var tab=$("Tool-Button").get("li");
for(var i=0;i<tab.length;i++) {
$(tab[i]).attachEvent("onclick",function(){
for(var k=0;k<tab.length;k++) {
$(tab[k]).CSS("");
}
$(this).CSS("navon");
);
}
}
); 展开

 我来答

2个回答

#合辑# 面试问优缺点怎么回答最加分？

百度网友a435633
推荐于2016-10-19 · TA获得超过1234个赞

知道大有可为答主

回答量：1018

采纳率：0%

帮助的人：0

我也去答题访问个人页

关注

展开全部

用 jQuery 的话，很简单:

$('ul li').click(function(e){
alert($(this).html());
});

自己实现就要麻烦一些:

function attachEvent(obj,evt,fn){
if(obj.addEventListener){
obj.addEventListener(evt, fn, false);
}else if(obj.attachEvent){
obj.attachEvent('on'+evt, fn);
}
}

window.onload = function() {
var ul = document.getElementById('test');
var arr = ul.childNodes;
alert(arr.length);
for(var i=0; i<arr.length; i++) {
if(arr[i].tagName != 'LI') continue;
attachEvent(arr[i], 'click', function(e) {
var li = e.target || e.srcElement;
alert(li.innerHTML);
});
}
}

为了方便，我给 ul 加了个 id：
<ul id="test"><li>sadada</li><li>sadada</li><li>sadada</li></ul>

补充
如果是obj.attachEvent("onclick",function(){arr[i]的一些操作})
这样写的话arr[i]不能传到function（）里这里有什么好的解决方法么

这样可以解决，不过看起来不是很好。

arr[i].func = function(e) {
alert(this.innerHTML);
}
attachEvent(arr[i], 'click', arr[i].func);

补充二：
还是用以下 HTML 代码作测试
<ul id="test"><li>sadada</li><li>sadada</li><li>sadada</li></ul>

function attachEvent(obj, evt, fn){
obj._fn = obj._fn || {};
obj._fn[evt] = fn;
if(obj.addEventListener){
obj.addEventListener(evt, obj._fn[evt], false);
}else if(obj.attachEvent){
obj.attachEvent('on'+evt, obj._fn[evt]);
}
}

window.onload = function() {
var ul = document.getElementById('test');
var arr = ul.childNodes;
for(var i=0; i<arr.length; i++) {
if(arr[i].tagName != 'LI') continue;
attachEvent(arr[i], 'click', function(e) {
alert(this.innerHTML);
for(var j=0; j<arr.length; j++) {
arr[j].innerHTML = arr[j].innerHTML.replace(/#$/, '');
if(arr[j] != this) {
arr[j].innerHTML += '#';
}
}
});
}
}

可以实现你说的功能。
（点了某个节点，其他节点文字加个 '#'）

实际上你这个问题还是个选择器的问题，你可以看看 jQuery 的 siblings 这个函数，可以得到同层次的兄弟节点，很方便。

已赞过 已踩过<

评论收起

翟陈吐彩美人家c
推荐于2018-05-12 · TA获得超过1.8万个赞

知道大有可为答主

回答量：3595

采纳率：94%

帮助的人：346万

我也去答题访问个人页

关注

展开全部

JS统一为某节点下指定子节点绑定事件

根据父节点绑定P子节点点击事件，点击p节点显示该节点ID
[c-sharp] view plaincopy
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
<title>测试节点</title>  
</head>  
  
<body>  
<div id="div2">  
<p id="p3">p3</p>  
<p id="p4">p4</p>  
<p id="p5">p5</p>  
</div>  
<div id="div1">显示点击ID</div>  
</body>  
</html>  
<mce:script language="javascript"><!--  
function elClick(object)  
{  
    document.getElementById('div1').innerHTML=object.id;  
}  
  
function init()  
{  
    var p = document.getElementById("div2").childNodes;     
    for(var iLoop = 0; iLoop < p.length; iLoop ++)     
    {  
        var tmp = p[iLoop];  
        if(tmp.nodeName == 'P')  
        {  
            tmp.onclick = function(){elClick(this)};  
        }  
    }    
}  
init();  
// --></mce:script>


本回答被网友采纳






已赞过已踩过<

你对这个回答的评价是？
评论收起

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

js给所有子节点绑定事件

其他类似问题

为你推荐：