我们想要在一个html页面上执行一段javascript代码,其中最典型的,也是最常用的方式是将html中嵌入javascript的驱动事件。javascript的驱动事件如下:
|
以上的驱动事件需要在html控件元素中进行事件处理,html表单元素所具有的javascript事件如下:
|
其中还有一个叫做”onPropertyChange“的事件,所有html控件元素都可以使用,它表示当前元素标签的属性值发生变化的时候所触发的事件。
例1:当鼠标点击到button的时候,通过触发onclick事件来调用javascript函数”myfunction“:
<script
language =
"javascript" >
function myfunction(txt)
{
alert (txt);
}
</script>
<input type = "button" onclick = "myfunction('Hello')" value = "Call function" >
function myfunction(txt)
{
alert (txt);
}
</script>
<input type = "button" onclick = "myfunction('Hello')" value = "Call function" >
例2:常用的联动下拉菜单,通过选择第一个下拉框,改变第二个下拉框的内容:
html代码:
<
select
id =
"test1" onChange=
"selectChange(this.value);" >
<option value = "" >----</option>
<option value = "1" >辽宁</option>
<option value = "2" >吉林</option>
<option value = "3" >黑龙江</option>
</ select >
< select id = "test2" >
<option value = "" >----</option>
</ select >
<option value = "" >----</option>
<option value = "1" >辽宁</option>
<option value = "2" >吉林</option>
<option value = "3" >黑龙江</option>
</ select >
< select id = "test2" >
<option value = "" >----</option>
</ select >
javascript代码:
<script
language =
"javascript" >
//定义一个Array存放联动菜单数据
var vals = new Array ();
//数据格式 ID,父级ID,名称
vals[0]= new Array ( "1" , "1" , "沈阳" );
vals[1]= new Array ( "2" , "1" , "大连" );
vals[2]= new Array ( "3" , "2" , "长春" );
vals[3]= new Array ( "4" , "2" , "松原" );
vals[4]= new Array ( "5" , "3" , "哈尔滨" );
vals[5]= new Array ( "6" , "3" , "鸡西" );
//联动菜单函数
var selectChange = function (selectedValue)
{
//取得需要联动的select控件元素
var test2 = document .getElementById( "test2" );
//将其长度设置为0,即清空现有option项
test2. length = 0;
//追加一个默认option项
test2. options [test2. length ] = new Option ( "----" , "" );
//遍历联动菜单数据项
for ( var i = 0; i < vals. length ; i++)
{
//如果当前数据项等于当前选中项
if ( this .vals[i][1] == selectedValue)
{
//追加一个option项到test2中
test2. options [test2. length ] = new Option ( this .vals[i][2], this .vals[i][0]);
}
}
}
</script>
//定义一个Array存放联动菜单数据
var vals = new Array ();
//数据格式 ID,父级ID,名称
vals[0]= new Array ( "1" , "1" , "沈阳" );
vals[1]= new Array ( "2" , "1" , "大连" );
vals[2]= new Array ( "3" , "2" , "长春" );
vals[3]= new Array ( "4" , "2" , "松原" );
vals[4]= new Array ( "5" , "3" , "哈尔滨" );
vals[5]= new Array ( "6" , "3" , "鸡西" );
//联动菜单函数
var selectChange = function (selectedValue)
{
//取得需要联动的select控件元素
var test2 = document .getElementById( "test2" );
//将其长度设置为0,即清空现有option项
test2. length = 0;
//追加一个默认option项
test2. options [test2. length ] = new Option ( "----" , "" );
//遍历联动菜单数据项
for ( var i = 0; i < vals. length ; i++)
{
//如果当前数据项等于当前选中项
if ( this .vals[i][1] == selectedValue)
{
//追加一个option项到test2中
test2. options [test2. length ] = new Option ( this .vals[i][2], this .vals[i][0]);
}
}
}
</script>