Javascript驱动事件

      我们想要在一个html页面上执行一段javascript代码，其中最典型的，也是最常用的方式是将html中嵌入javascript的驱动事件。javascript的驱动事件如下：

 

onBlur当前元素失去焦点时触发onFocus当某个元素获得焦点时触发onLoad页面内容完成装载时触发onMove浏览器窗口被移动时触发onUnload当前页面被退出或重置时触发onClick鼠标点击时触发onDblClick鼠标双击时触发onMouseDown按下鼠标时触发onMouseMove鼠标移动时触发onMouseOut鼠标离开某对象范围时触发onMouseOver当鼠标移动到某对象范围的上方时触发onMouseUp鼠标按下后松开鼠标时触发onKeyPress档键盘上的某个键被按下并且释放时触发onKeyDown当键盘上某个键被按下时触发onKeyUp当键盘上某个键被按放开时触发

 

      以上的驱动事件需要在html控件元素中进行事件处理，html表单元素所具有的javascript事件如下：

 

checkboxonClickonBluronFocusfileuploadonClickonBluronFocushidden   passwordonBluronFocusonSelectradioonClickonBluronFocusresetonReset  selectonBluronFocusonChangesubmitonSubmit  textonChange  textareaonChange  

 

      其中还有一个叫做”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">

 

      例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>

 

      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>