首先来认识一下什么叫事件,请看下边的代码:
<
html
>
< head >
</ head >
< body >
< input type ="button" value ="这是一个按钮" onclick ="window.alert(this.value);" />
</ body >
</ html >
很简单的一个实例,页面只有一个按钮,它的value值为"这是一个按钮",并且我们给它指定了onclick属性,它的值为一行JavaScript代码,使用了window对象的alert方法,将this.value的内容显示在警告窗体中.这里的this是啥呢?this就是当前操作的对象,即该input对象.这份代码告诉浏览器:"当前对象受点击"的时候要调用window.alert(this.value)这行代码,因此浏览器在按钮受点击的时候就执行了相关的操作.一个对象可以有许多事件,比如说单击(click),双击(dbclick),鼠标移到上边(mouseover),鼠标移开(mouseout)等等,这些事件经常在各种流传的代码中可以看到.那如何给一个对象设置事件发生时执行的代码呢?一般来说有以下三种方式:
< head >
</ head >
< body >
< input type ="button" value ="这是一个按钮" onclick ="window.alert(this.value);" />
</ body >
</ html >
第一种:直接设置HTML元素的事件属性,名称一般是on+事件名称,比如说单击事件即为onclick,实例请见上边的代码
第二种:在script中对HTML对象设置事件属性,名称一般也是on+事件名称,比如说obj.onclick = 函数,请见实例代码:
<
html
>
< head >
</ head >
< body >
< input type ="button" value ="这是一个按钮" id ="mybut" />
< script type ="text/javascript" language ="javascript" >
var mybut = window.document.getElementById( " mybut " ); // 根据HTML元素的id属性获取该元素在DOM中的对象
mybut.onclick = function ()
{
window.alert( this .value);
}
</ script >
</ body >
</ html >
或者:
< head >
</ head >
< body >
< input type ="button" value ="这是一个按钮" id ="mybut" />
< script type ="text/javascript" language ="javascript" >
var mybut = window.document.getElementById( " mybut " ); // 根据HTML元素的id属性获取该元素在DOM中的对象
mybut.onclick = function ()
{
window.alert( this .value);
}
</ script >
</ body >
</ html >
<
html
>
< head >
</ head >
< body >
< input type ="button" value ="这是一个按钮" id ="mybut" />
< script type ="text/javascript" language ="javascript" >
var mybut = window.document.getElementById( " mybut " ); // 根据HTML元素的id属性获取该元素在DOM中的对象
function MyButton_Onclick()
{
alert( this .value);
}
mybut.onclick = MyButton_Onclick;
</ script >
</ body >
</ html >
这第二种方式有两种方法来指定执行的代码,但本质上是一样的,同样是指定一个函数给对象,要求对象当某事件发生的时候执行该函数.
< head >
</ head >
< body >
< input type ="button" value ="这是一个按钮" id ="mybut" />
< script type ="text/javascript" language ="javascript" >
var mybut = window.document.getElementById( " mybut " ); // 根据HTML元素的id属性获取该元素在DOM中的对象
function MyButton_Onclick()
{
alert( this .value);
}
mybut.onclick = MyButton_Onclick;
</ script >
</ body >
</ html >
第三种方式: 使用obj.attachEvent(IE浏览器)/obj.addEventListener方法来指定,建议使用此方法:
<
html
>
< head >
</ head >
< body >
< input type ="button" value ="这是一个按钮" id ="mybut" />
< script type ="text/javascript" language ="javascript" >
var mybut = window.document.getElementById( " mybut " ); // 根据HTML元素的id属性获取该元素在DOM中的对象
function MyButton_Onclick(e)
{
var tag = window.document.all != null ? e.srcElement : e.target; // 获取事件触发来源对象,即按钮对象(分为IE和Mozilla/firefox,e是event对象.
window.alert(tag.value);
}
if (window.document.all) // IE浏览器
mybut.attachEvent( " onclick " , MyButton_Onclick);
else
mybut.addEventListener( " click " , MyButton_Onclick, false ); // 注意这里第一个参数是click而不是onclick
</ script >
</ body >
</ html >
为什么建议第三种方式呢?上边所列的第一种方式很明显只是设置一下元素属性,只可能指定一次,而第二种方式与第三种方式的差别可以从下边的实例中看出来:
< head >
</ head >
< body >
< input type ="button" value ="这是一个按钮" id ="mybut" />
< script type ="text/javascript" language ="javascript" >
var mybut = window.document.getElementById( " mybut " ); // 根据HTML元素的id属性获取该元素在DOM中的对象
function MyButton_Onclick(e)
{
var tag = window.document.all != null ? e.srcElement : e.target; // 获取事件触发来源对象,即按钮对象(分为IE和Mozilla/firefox,e是event对象.
window.alert(tag.value);
}
if (window.document.all) // IE浏览器
mybut.attachEvent( " onclick " , MyButton_Onclick);
else
mybut.addEventListener( " click " , MyButton_Onclick, false ); // 注意这里第一个参数是click而不是onclick
</ script >
</ body >
</ html >
<
html
>
< head >
</ head >
< body >
< input type ="button" value ="这是第二种方式的示例按钮" id ="mybut1" />
< input type ="button" value ="这是第三种方式的示例按钮" id ="mybut2" />
< script type ="text/javascript" language ="javascript" >
var mybut1 = window.document.getElementById( " mybut1 " );
var mybut2 = window.document.getElementById( " mybut2 " );
// --------------第二种方式----------------
function MyButton_Onclick1_1()
{
alert( " 指定的第一个函数 " );
}
function MyButton_Onclick1_2()
{
alert( " 指定的第二个函数 " );
}
mybut1.onclick = MyButton_Onclick1_1;
mybut1.onclick = MyButton_Onclick1_2;
// --------------第三种方式-----------------
function MyButton_Onclick2_1(e)
{
alert( " 指定的第一个函数 " );
}
function MyButton_Onclick2_2(e)
{
alert( " 指定的第二个函数 " );
}
if (window.document.all)
{
mybut2.attachEvent( " onclick " , MyButton_Onclick2_1);
mybut2.attachEvent( " onclick " , MyButton_Onclick2_2);
}
else
{
mybut2.addEventListener( " click " , MyButton_Onclick2_1, false );
mybut2.addEventListener( " click " , MyButton_Onclick2_2, false );
}
</ script >
</ body >
</ html >
上边的示例使用了两个按钮,并且使用了第二种方式与第三种方式先后指定了两个函数给click事件,点击第一个按钮可以看到弹出了"指定的第二个函数",说明只有MyButton_Onclick1_2函数生效,而先前指定的MyButton_Onclick1_1被MyButton_Onclick1_2代替了。点击第二个按钮可以看到弹出了两个窗体,显示的内容分别是"指定的第一个函数"和"指定的第二个函数",很明显,使用attachEvent/addEventListener可以即增加要执行的程序并且还能够保留原有的程序,在IE中,它们是根据增加的顺序倒序执行,即先执行后添加的MyButton_Onclick2_2,然后再执行MyButton_Onclick2_1,而Firefox中则是相反,先执行MyButton_Onclick2_1然后再执行MyButton_Onclick2_2。。没办法,IE和Firefox是冤家,对着干。。呵呵
< head >
</ head >
< body >
< input type ="button" value ="这是第二种方式的示例按钮" id ="mybut1" />
< input type ="button" value ="这是第三种方式的示例按钮" id ="mybut2" />
< script type ="text/javascript" language ="javascript" >
var mybut1 = window.document.getElementById( " mybut1 " );
var mybut2 = window.document.getElementById( " mybut2 " );
// --------------第二种方式----------------
function MyButton_Onclick1_1()
{
alert( " 指定的第一个函数 " );
}
function MyButton_Onclick1_2()
{
alert( " 指定的第二个函数 " );
}
mybut1.onclick = MyButton_Onclick1_1;
mybut1.onclick = MyButton_Onclick1_2;
// --------------第三种方式-----------------
function MyButton_Onclick2_1(e)
{
alert( " 指定的第一个函数 " );
}
function MyButton_Onclick2_2(e)
{
alert( " 指定的第二个函数 " );
}
if (window.document.all)
{
mybut2.attachEvent( " onclick " , MyButton_Onclick2_1);
mybut2.attachEvent( " onclick " , MyButton_Onclick2_2);
}
else
{
mybut2.addEventListener( " click " , MyButton_Onclick2_1, false );
mybut2.addEventListener( " click " , MyButton_Onclick2_2, false );
}
</ script >
</ body >
</ html >