javascript 事件处理 概念不懂


<!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">
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 cancleEvent(event){
if(event.preventDefault){
event.preventDefault();
event.stopPropagation();
}else{
event.returnValue=false;
event.cancleBubble=true;
}
}
catchEvent(window,"load",setupEvents);
function setupEvents(event){
catchEvent(document.getElementById("selectopts"),"change",checkForm);
}
function checkForm(event){
var theevent=(event)?event:window.event;
var opts=document.getElementById("someform").selectopts.options;
for(var i=0;i<opts.length;i++){
if(opts[i].selected){
switch(opts[i].value  ){
case "rendao": opts[i+1].selected=true;opts[i+2].selected=true; break;
case "niaodao": opts[i+1].selected=true; break;
  }
 }
}
cancleEvent(theevent);
}
</script>
</head><body>
<form id="someform" action="test2.html" >
<select id="selectopts" multiple="multiple">
<option value="huadao">花道</option>
<option value="rendao">人道</option>
<option value="rendao1">人道1</option>
<option value="rendao2">人道2</option>
<option value="niaodao">鸟道</option>
<option value="niaodao1">鸟道1</option>
<option value="niaodao2">鸟道2</option>
<option value="chudao">出道</option>
<option value="dadao">大道</option>
</select>
<input type="submit" value="提交" />
</form>
</body>
</html>一：这几个event 各代表什么 为什么要这要写？
二：catchEvent(window,"load",setupEvents);
function setupEvents(event){
catchEvent(document.getElementById("selectopts"),"change",checkForm);
}
    为什么不直接写catchEvent(document.getElementById("selectopts"),"change",checkForm);
   我试过 好像不行？？
求大牛解释！！

解决方案 »

  1.   

    第一个通用事件对象，第二个为window的load事件对象，第三个为select的change事件对象。
    catchEvent(window,"load",setupEvents);
    这个是这样的window.onload=setupEvents，在文档加载完后执行setupEvents方法，这个方法是给selectoopts绑定change事件。如果去掉了，放在head里是不是行的，放到</body>前是可以的。
      

  2.   

    function catchEvent(eventObj, event, eventHandler)
    {
    if (eventObj.addEventListener) //DOM事件处理
    {
    eventObj.addEventListener(event, eventHandler, false) //增加事件 固定格式
    }
    else if (eventObj.attachEvent)//ie事件处理 
    {
    event = "on" + event;
    eventObj.attachEvent(event, eventHandler);
    }
    }
    function cancleEvent(event)
    {
    if (event.preventDefault)
    {
    event.preventDefault();//DOM事件阻止事件的默认行为
    event.stopPropagation(); //DOM时间组织将来事件冒泡
    }
    else
    {
    event.returnValue = false; //ie下取消事件的默认动作
    event.cancleBubble = true;//ie停止事件向上冒泡
    }
    }
    catchEvent(window, "load", setupEvents); //为window对象增加load事件 事件函数是setupEvents 相当与window.onload = function setupEvents(event){}
    function setupEvents(event)
    {
    catchEvent(document.getElementById("selectopts"), "change", checkForm); //定义document.getElementById("selectopts")的onchange事件
    }
    function checkForm(event)
    {
    var theevent = (event) ? event : window.event; 
    var opts = document.getElementById("someform").selectopts.options;
    for (var i = 0; i < opts.length; i++)
    {
    if (opts[i].selected)
    {
    switch (opts[i].value)
    {
    case "rendao" :
    opts[i + 1].selected = true;
    opts[i + 2].selected = true;
    break;
    case "niaodao" :
    opts[i + 1].selected = true;
    break;
    }
    }
    }
    cancleEvent(theevent); //取消事件
    }
    LZ去看下js的事件机制就明白了
      

  3.   

    在定义某个dom元素的事件时 会自动生成一个事件对象event
    例如： <input type="text" id="aa" onclick="MyExample(event)">function MyExample(e){ //e即html中的event对象 
     //通过这个event对象可以控制像键盘回车等操作 e.keyCode == 13这种
     
    }
    还是得多看些相关的书籍 呵呵
      

  4.   

    function setupEvents(event)
    {
        catchEvent(document.getElementById("selectopts"), "change", checkForm); //定义document.getElementById("selectopts")的onchange事件
    }我对setupEvents(event)这个函数传入一个event 还是有点不理解 函数体好像没用event这个属性啊
      

  5.   

    我试过 不写这个event 也是可以的  但为什么书上要这么写 求解
      

  6.   

    你没写也可以 是因为ie中的event是全局的  
    var theevent = (event) ? event : window.event;//走冒号分支 所以代码依然可用
    如果是火狐下 你不写就错了 火狐下的事件是通过触发控件的动作来激发的
      

  7.   


    可以直接写，但是第三个参数是方法名称，所以你那种写法当然不对 。至于functions setEvents(event)这个参数“event”可以不要，因为方法内部没有用到event
    直接写的方式：
    catchEvent(window,"load",function(){catchEvent(document.getElementById("selectopts"),"change",checkForm);});