/*
 DOMhelp 1.0
 written by Chris Heilmann
 http://www.wait-till-i.com
 To be featured in "Beginning JavaScript for Practical Web Development, Including  AJAX" 
*/
DOMhelp={
 debugWindowId:'DOMhelpdebug',
 init:function(){
  if(!document.getElementById || !document.createTextNode){return;}
 },
 lastSibling:function(node){
  var tempObj=node.parentNode.lastChild;
  while(tempObj.nodeType!=1 && tempObj.previousSibling!=null){
   tempObj=tempObj.previousSibling;
  }
  return (tempObj.nodeType==1)?tempObj:false;
 },
 firstSibling:function(node){
  var tempObj=node.parentNode.firstChild;
  while(tempObj.nodeType!=1 && tempObj.nextSibling!=null){
   tempObj=tempObj.nextSibling;
  }
  return (tempObj.nodeType==1)?tempObj:false;
 },
 getText:function(node){
  if(!node.hasChildNodes()){return false;}
  var reg=/^\s+$/;
  var tempObj=node.firstChild;
  while(tempObj.nodeType!=3 && tempObj.nextSibling!=null || reg.test(tempObj.nodeValue)){
   tempObj=tempObj.nextSibling;
  }
  return tempObj.nodeType==3?tempObj.nodeValue:false;
 },
 setText:function(node,txt){
  if(!node.hasChildNodes()){return false;}
  var reg=/^\s+$/;
  var tempObj=node.firstChild;
  while(tempObj.nodeType!=3 && tempObj.nextSibling!=null || reg.test(tempObj.nodeValue)){
   tempObj=tempObj.nextSibling;
  }
  if(tempObj.nodeType==3){tempObj.nodeValue=txt}else{return false;}
 },
 createLink:function(to,txt){
  var tempObj=document.createElement('a');
  tempObj.appendChild(document.createTextNode(txt));
  tempObj.setAttribute('href',to);
  return tempObj;
 },
 createTextElm:function(elm,txt){
  var tempObj=document.createElement(elm);
  tempObj.appendChild(document.createTextNode(txt));
  return tempObj;
 },
 closestSibling:function(node,direction){
  var tempObj;
  if(direction==-1 && node.previousSibling!=null){
   tempObj=node.previousSibling;
   while(tempObj.nodeType!=1 && tempObj.previousSibling!=null){
     tempObj=tempObj.previousSibling;
   }
  }else if(direction==1 && node.nextSibling!=null){
   tempObj=node.nextSibling;
   while(tempObj.nodeType!=1 && tempObj.nextSibling!=null){
     tempObj=tempObj.nextSibling;
   }
  }
  return tempObj.nodeType==1?tempObj:false;
 },
 initDebug:function(){
  if(DOMhelp.debug){DOMhelp.stopDebug();}
  DOMhelp.debug=document.createElement('div');
  DOMhelp.debug.setAttribute('id',DOMhelp.debugWindowId);
  document.body.insertBefore(DOMhelp.debug,document.body.firstChild);
 },
 setDebug:function(bug){
  if(!DOMhelp.debug){DOMhelp.initDebug();}
  DOMhelp.debug.innerHTML+=bug+'\n';
 },
 stopDebug:function(){
  if(DOMhelp.debug){
   DOMhelp.debug.parentNode.removeChild(DOMhelp.debug);
   DOMhelp.debug=null;
  }
 },
 getKey:function(e){
  if(window.event){
       var key = window.event.keyCode;
     } else if(e){
       var key=e.keyCode;
     }
  return key;
 },
/* helper methods */
 getTarget:function(e){
  var target = window.event ? window.event.srcElement : e ? e.target : null;
  if (!target){return false;}
  while(target.nodeType!=1 && target.nodeName.toLowerCase()!='body'){
   target=target.parentNode;
  }
  return target;
 },
 stopBubble:function(e){
  if(window.event && window.event.cancelBubble){
   window.event.cancelBubble = true;
  } 
  if (e && e.stopPropagation){
   e.stopPropagation();
  }
 },
 stopDefault:function(e){
  if(window.event && window.event.returnValue){
   window.event.returnValue = false;
  } 
  if (e && e.preventDefault){
   e.preventDefault();
  }
 },
 cancelClick:function(e){
  if (window.event){
   window.event.cancelBubble = true;
   window.event.returnValue = false;
  }
  if (e && e.stopPropagation && e.preventDefault){
   e.stopPropagation();
   e.preventDefault();
  }
 },
 addEvent: function(elm, evType, fn, useCapture){
  if (elm.addEventListener){
   elm.addEventListener(evType, fn, useCapture);
   return true;
  } else if (elm.attachEvent) {
   var r = elm.attachEvent('on' + evType, fn);
   return r;
  } else {
   elm['on' + evType] = fn;
  }
 },
 cssjs:function(a,o,c1,c2){
  switch (a){
   case 'swap':
    o.className=!DOMhelp.cssjs('check',o,c1)?o.className.replace(c2,c1):o.className.replace(c1,c2);
   break;
   case 'add':
    if(!DOMhelp.cssjs('check',o,c1)){o.className+=o.className?' '+c1:c1;}
   break;
   case 'remove':
    var rep=o.className.match(' '+c1)?' '+c1:c1;
    o.className=o.className.replace(rep,'');
   break;
   case 'check':
    var found=false;
    var temparray=o.className.split(' ');
    for(var i=0;i<temparray.length;i++){
     if(temparray[i]==c1){found=true;}
    }
    return found;
   break;
  }
 },
    safariClickFix:function(){
      return false;
    }
}
DOMhelp.addEvent(window, 'load', DOMhelp.init, false);
// JavaScript Document
b={
init:function(){
b.n=document.getElementById('news');
b.addmy('click',b.litest,'li');
b.addmy('click',b.atest,'a');
b.addmy('click',b.ptest,'p');
},
addmy:function(eventname,functionname,element){
var temp=b.n.getElementByTagName(element);
for (var i=0;i<temp.length;i++)
{
temp[i].addEventListener(eventname,functionname,false);
}
},
litest:function(e){
alert('li is clicked');
},
atest:function(e){
alert('a is clicked');
},
ptest:function(e){
alert('p is clicked');
}
}
DOMhelp.addEvent(window,'load',b.init,false)<!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>
<script type="text/javascript" src="b.js"></script>
<script type="text/javascript" src="DOMhelp.js"></script>
</head><body>
<ul id="news">
   <li>
      <h3><a href="#">news</a></h3>
  <p>11111</p>
  <p class="more"><a href="#">more link</a></p>
</li>
</ul>
</body>
</html>

解决方案 »

  1.   

    b.js里temp[i].addEventListener(eventname,functionname,false);
    这一句只支持非ie浏览器
    ie中
    可以写成
    if(document.all) {
        tempp[i].attachEvent("on"+eventname,functionname);
    }else {
        temp[i].addEventListener(eventname,functionname,false);
    }
      

  2.   


    b={
        init:function(){
            b.n=document.getElementById('news');
            b.addmy('click',b.litest,'LI');
            b.addmy('click',b.atest,'A');
            b.addmy('click',b.ptest,'P');
        },
        addmy:function(eventname,functionname,element){
            var temp=b.n.getElementsByTagName(element);
            for (var i=0;i<temp.length;i++)
            {
                if(temp[i].addEventListener) temp[i].addEventListener(eventname,functionname,false);
                else temp[i].attachEvent("on" + eventname,functionname);
            }
        },
        litest:function(e){
            alert('li is clicked');
        },
        atest:function(e){
            alert('a is clicked');
        },
        ptest:function(e){
            alert('p is clicked');
        }
    }
    DOMhelp.addEvent(window,'load',b.init,false)
      

  3.   


    <!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>
    <script type="text/javascript" src="DOMhelp.js"></script>
    <script type="text/javascript">
    var b={
        init:function(){
            b.n=document.getElementById('news');
            b.addmy('click',b.litest,'li');
            b.addmy('click',b.atest,'a');
            b.addmy('click',b.ptest,'p');
        },
        addmy:function(eventname,functionname,element){
            var temp=b.n.getElementsByTagName(element);
            for (var i=0;i<temp.length;i++)
            {
    (function(){

    DOMhelp.addEvent(this,eventname,functionname,false);   
    }).call(temp[i],eventname,functionname);
                
            }
        },
        litest:function(e){
            alert('li is clicked');
        },
        atest:function(e){
            alert('a is clicked');
        },
        ptest:function(e){
            alert('p is clicked');
        }
    }
    DOMhelp.addEvent(window,'load',b.init,false);
    </script>
    </head><body>
    <ul id="news">
       <li>
          <h3><a href="#">news</a></h3>
          <p>11111</p>
          <p class="more"><a href="#">more link</a></p>
        </li>
    </ul>    
    </body>
    </html>
      

  4.   

    额,对于非IE和IE之间不太懂(document.all) 是用来判断什么的?
      

  5.   

    (function(){
                    
                    DOMhelp.addEvent(this,eventname,functionname,false);      
                }).call(temp[i],eventname,functionname);
                
            }
    不懂什么意思?为啥这么些?
    .call(temp[i],eventname,functionname);什么意思?
      

  6.   


    你也可以用简单的for循环~·这么写是用了一个闭包~·
    .call是自调方法~·然后传参数楼主如果不明白的话~·也没事~·你改成普通的for循环也能出来一样的效果 没问题的
      

  7.   

    if(document.all)这是用来判断是否是IE为啥?
      

  8.   


    document.all是IE专有的方法~·
    所以用它来判断当前用户是不是IE浏览器
      

  9.   

      e.stopPropagation();这个方法IE好像也不可以用的
      

  10.   


    嗯 不可以~·IE下是window.event.cancelBubble = true;
      

  11.   

    貌似看过这段代码,请问楼主这段代码从哪里来的啊?楼主看的是不是《深入浅出JavaScript》?