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");
);
}
}
); 展开
给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");
);
}
}
); 展开
展开全部
用 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 这个函数，可以得到同层次的兄弟节点，很方便。
$('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 这个函数，可以得到同层次的兄弟节点，很方便。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
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>
根据父节点绑定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>
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
