<!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);
我试过 好像不行??
求大牛解释!!
catchEvent(window,"load",setupEvents);
这个是这样的window.onload=setupEvents,在文档加载完后执行setupEvents方法,这个方法是给selectoopts绑定change事件。如果去掉了,放在head里是不是行的,放到</body>前是可以的。
{
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的事件机制就明白了
例如: <input type="text" id="aa" onclick="MyExample(event)">function MyExample(e){ //e即html中的event对象
//通过这个event对象可以控制像键盘回车等操作 e.keyCode == 13这种
}
还是得多看些相关的书籍 呵呵
{
catchEvent(document.getElementById("selectopts"), "change", checkForm); //定义document.getElementById("selectopts")的onchange事件
}我对setupEvents(event)这个函数传入一个event 还是有点不理解 函数体好像没用event这个属性啊
var theevent = (event) ? event : window.event;//走冒号分支 所以代码依然可用
如果是火狐下 你不写就错了 火狐下的事件是通过触发控件的动作来激发的
可以直接写,但是第三个参数是方法名称,所以你那种写法当然不对 。至于functions setEvents(event)这个参数“event”可以不要,因为方法内部没有用到event
直接写的方式:
catchEvent(window,"load",function(){catchEvent(document.getElementById("selectopts"),"change",checkForm);});