最近正在看《javascript学习指南》遇到几个问题不明白,请教各位!这是书上的例子<html>
<head>
    <title></title>
  <script type="text/javascript">
  //<[CDATA[
 
  function catchEvent(eventObj,event,eventHandler){
  if(eventObj.addEventListener){
  eventObj.addEventListener(event,eventHandler,false);
  }
  else if(eventObj.attachEvent){
  event="on"+event;
  eventObj.attachEvent(event,eventHandler);
  }
  }
 
  function cancelEvent(event){
  if(event.preventDefault){
  event.preventDefault();
  event.stopPropagation();
  }else{
  event.returnValue=false;
  event.cancelBubble=true;
  }
  }
 
  catchEvent(window,"load",setupEvents);
 
  function setupEvents(evnt){
  catchEvent(document.getElementById("someForm"),"submit",validateForm);
  }
 
  function validateForm(evnt){
 
  var theEvent=evnt?evnt:window.event;
 
  var strResults="";
  var textInputs=document.getElementById("someForm").getElementsByTagName("input");
  for(var i=0;i<text.Inputs.length;i++){
  if(textInputs[i].type!="submit"){
  strResults += textInputs[i].value;
  }
  }
  document.getElementById("text4").value=strResults;
 
  //不要除去结果
  cancelEvent(theEvent);
  }
 
  //]]>
  </script>
</head>
<body>
<form id="someForm" action="">
<p>
<input type="text" name="text1" /><br/>
<input type="password" name="text2" /><br/>
<input type="hidden" name="text3" value="hidden value" />
<textarea name="text4" cols="50" rows="10">the text area</textarea>
<input type="submit" value="Submit" /><br/>
</p>
</form>
</body>
</html>
几个问题:
1.书上的效果是textarea会显示前面两个input输入的值,但是我试了不行啊,会在url后面加上“text1=3241&text2=3&text3=hidden+value&text4=the+text+area”难道是书太老了??
2.function cancelEvent(event)这句话,event不是一个对象吗,函数括号里面的不是应该是参数吗?
3.function validateForm(evnt)
  调用的时候没有说什么事evnt啊,后面怎么可以直接写var theEvent=evnt?evnt:window.event;
  evnt是哪里来的???

解决方案 »

  1.   

    function catchEvent(eventObj,event,eventHandler){
                 if(eventObj.addEventListener){
                     eventObj.addEventListener(event,eventHandler,false);    
                 }
                 else if(eventObj.attachEvent){
                     event="on"+event;
                     eventObj.attachEvent(event,eventHandler);
                 }
             }
      //上边是针对IE和FF下给对象加事件的公共处理       
             function cancelEvent(event){
                 if(event.preventDefault){
                     event.preventDefault();
                     event.stopPropagation();    
                 }else{
                     event.returnValue=false;
                     event.cancelBubble=true;    
                 }
             }
             //上边是针对IE和FF的事件阻止方法
             catchEvent(window,"load",setupEvents);//给window增加onload事件
             
             function setupEvents(evnt){
                 catchEvent(document.getElementById("someForm"),"submit",validateForm);
                 //给someForm增加onsubmit事件 事件函数时validateForm 其隐藏有个event对象参数
                 // 也就是你在后边看到的evnt
             }
             
             function validateForm(evnt){
             
                 var theEvent=evnt?evnt:window.event;//兼容IE的FF的event对象的写法
                 
                 var strResults="";
                 var textInputs=document.getElementById("someForm").getElementsByTagName("input");
                 for(var i=0;i<textInputs.length;i++){ //这个条件 你原来写的不对 我给你改了
                     if(textInputs[i].type!="submit"){
                         strResults += textInputs[i].value;    
                     }    
                 }    
                 document.getElementById("text4").value=strResults;
                 
                 //不要除去结果
                 cancelEvent(theEvent);
             }
      

  2.   

    2.function cancelEvent(event)这句话,event不是一个对象吗,函数括号里面的不是应该是参数吗?event是个对象没错 但是这个函数中的event是个形参 不要混了 如果你分不清楚 
     function cancelEvent(e){
                 if(e.preventDefault){
                     e.preventDefault();
                     e.stopPropagation();    
                 }else{
                     e.returnValue=false;
                     e.cancelBubble=true;    
                 }
             }
      

  3.   

    event是事件监听,触发后,对应的事件信息对象。标准浏览器中,会自动传入回调函数,ie中会给到window.eventevent包含很多事件发生相关属性,你可以查一下比如:var ct = document.getElementById('containter');
    ct.onclick = function(e){
       e = e || window.event; //针对两种浏览器的兼容写法
    }
      

  4.   

    textInputs写成text.Inputs,还有textarea没有id属性。<html>
    <head>
        <title></title>
         <script type="text/javascript">
             //<[CDATA[
             
             function catchEvent(eventObj,event,eventHandler){
                 if(eventObj.addEventListener){
                     eventObj.addEventListener(event,eventHandler,false);    
                 }
                 else if(eventObj.attachEvent){
                     event="on"+event;
                     eventObj.attachEvent(event,eventHandler);
                 }
             }
             
             function cancelEvent(event){
                 if(event.preventDefault){
                     event.preventDefault();
                     event.stopPropagation();    
                 }else{
                     event.returnValue=false;
                     event.cancelBubble=true;    
                 }
             }
             
             catchEvent(window,"load",setupEvents);
             
             function setupEvents(evnt){
                 catchEvent(document.getElementById("someForm"),"submit",validateForm);
             }
             
             function validateForm(evnt){
             
                 var theEvent=evnt?evnt:window.event;
                 
                 var strResults="";
                 var textInputs=document.getElementById("someForm").getElementsByTagName("input");
                 for(var i=0;i<textInputs.length;i++){
                     if(textInputs[i].type!="submit"){
                         strResults += textInputs[i].value;    
                     }    
                 }    
                 document.getElementById("text4").value=strResults;
                 //不要除去结果
                 cancelEvent(theEvent);
             }
             
             //]]>
         </script>
    </head>
    <body>
        <form id="someForm" action="">
            <p>
            <input type="text" name="text1" /><br/>
            <input type="password" name="text2" /><br/>
            <input type="hidden" name="text3" value="hidden value" />
            <textarea id="text4" name="text4" cols="50" rows="10">the text area</textarea>
            <input type="submit" value="Submit" /><br/>
            </p>
        </form>
    </body>
    </html>
      

  5.   

    2.function cancelEvent(event)这句话,event不是一个对象吗,函数括号里面的不是应该是参数吗?
    event是函数cancelEvent的形参,用什么名字都一样。3.function validateForm(evnt)
      调用的时候没有说什么事evnt啊,后面怎么可以直接写var theEvent=evnt?evnt:window.event;
      evnt是哪里来的???
    这里的evnt一样是validateForm的形参,用什么名字都一样。
    那么这个evnt是从哪来的?这个各个浏览器不太一样
    a. IE浏览器有一个全局对象叫做event,在任何地方都可以直接调用,调用形式为window.event或event
    b. Firefox浏览器,当有事件触发时,浏览器会生成一个event对象传入事件处理函数,这里的validateForm和cancelEvent都是做为事件处理函数的,所有其evnt也是由浏览器生成并传入。因为存在这样的差别,所以才会有var theEvent=evnt?evnt:window.event;来兼容这两种情况
      

  6.   

    小弟我是不明白这个
    例如function H(x,y){
               ......
             }我们调用的时候是H(2,3)这样的,所以x是2,y是3,但是现在这个evnt,调用validateForm的时候也没告诉evnt是什么啊