BOM之JavaScript常用事件

鼠标点击事件(click/dblclick/mousedown/mouseup)

加载与卸载事件(load/unload)

聚焦与离焦事件

键盘事件

提交与重置事件

选择与改变事件   //比如选地址，选完省份后面跟着跳出对应的市区

//回调函数   我们没有显示的调用它。

function movefunc(event){

//window.status = "hello"; //浏览器左下角状态栏显示信息

window.status = event.clientX+","+event.clientY;

//alert("hello");

}

function clear(event){      //与上面相对,括号里可以不传参数

window.status = "清空了";

}

function over(){  //鼠标遇到div边界触发

//alert("I am in");

}

</script>

<div style="border:solid 2px; width:5cm; height:5cm" onmousemove = "movefunc(event)" onmouseout="clear(event)" onmouseover="over()">

</div>

function function1(){

alert("你刚刚双击了!");

}

function function2(){

alert("你刚刚单击了!");

}

</script>

<input type="button" value="单击我" onclick="function2()">

function changePosition(){

var adv = window.document.getElementById("adv");

adv.style.top=Math.random()*60+"px";

adv.style.left=Math.random()*100+"px";

setTimeout("changePosition()",1000);

}

function showmsg(){

alert("要关闭了");

}

</script>

<div id="adv" style="position:absolute; top:0.5cm; left:1cm">

<a href="http://www.baidu.com" target="_blank"><img src="cartoon.gif" /></a>

</div>

<script type="text/javascript">

function cleardefault(){

document.getElementById("name").value="";

}

function validate(){

var psd=  document.getElementById("psd").value ;

if(psd=="")

alert("密码不能为空")

}

</script>

<pre>

用户名 <input  id="name" type="text" value="请在此输入姓名"  onfocus="cleardefault()" onblur="alert('用户名不能为空')"  ><br>

密  码 <input  id="psd" type="password" value=""    onblur="validate()">

</pre>

function handle(event){

if(event.keyCode==13)   //keycode 是对应键值的ascII码,确认是13

alert("你点击了确认键，请问是否要提交？")

}

</script>

<input type="text" value="123" onkeypress="handle(event)"  />

</form>

function confirm_xxx(){            //当用户点击表单里的提交按钮时，自动被调用

var confrimvalue=  window.confirm("是不是要提交");

if( confrimvalue )

return true;

else

return false;

}

function showmsg(){

alert("数据已经复位！")

}

</script>

<input type="submit" value="提交"  onclick="alert('hello')"/>

//onclick不要也可以，点击提交会执行function

<input type="reset" value="重置" />

</form>

function changCity(){

    //先获取第一个select的值

var select1=   document.getElementById("province")

citylist1=['济南','青岛','威海'];

citylist2=['长沙','岳阳','湘潭'];

var select2=   document.getElementById("city")

if(select1.selectedIndex==1){

for(var i=0;i<citylist1.length;i++)

select2.innerHTML +=   "<option value=" +citylist1[i]+  ">"+citylist1[i]+"</option>"

}else{

for(var i=0;i<citylist2.length;i++)

select2.innerHTML +=   "<option value=" +citylist2[i]+  ">"+citylist2[i]+"</option>"

}

}

</script>

<select id="province" onchange="changCity()">

<option value="0">请选择省份</option>

<option value="1">山东</option>

<option value="2">湖南</option>

</select>

<select id="city"></select>