Javascript驱动事件

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

 

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

 

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

 

checkbox onClick onBlur onFocus fileupload onClick onBlur onFocus hidden       password onBlur onFocus onSelect radio onClick onBlur onFocus reset onReset     select onBlur onFocus onChange submit onSubmit     text onChange     textarea onChange

 

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