事件分类：
一般事件
页面事件
鼠标事件
键盘事件
表单事件
一般事件：获得焦点事件onfocus。失去焦点事件onblur
案例：
<script type="text/javascript">
functon a(){
document.getElemnetById("username").value="";
}
function b(){
document.getElementById("username").value="请输入名字";
}
</script>
</body>
用户名:<input type="text" id="username" οnfοcus="a()" value="请输入名字" οnblur="b()"><br>
密码：<input type="text" id="password" >
</html>
内容改变事件onchange
案例：<script type="text/jscript">
function a(){
var num=document.getElementById("select").value;
//var a=num.value;
alert(num);
var div=document.getElementById("div1");
div.style.fontSize=(num*10)+'px';
}
</script>
<body>
<select id="select" οnchange="a()">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<div id="div1">字体变换</div>
</body>
二、页面事件
onload装载事件
案例：
<script type="text/javascript">
var str="欢迎来到我的空间";
//substr(要抽取的子串的起始下标,子串中的字符数如果省略了该参数，那么返回从 stringObject 的开始位置到结尾的字串。)从起始索引号提取字符串中指定数目的字符
//substring提取字符串中两个指定的索引号之间的字符。
//charAt() 方法可返回指定位置的字符。
function a(){
str=str.substr(1)+str.charAt(0);
//alert(str.substr(1));
//alert(str.charAt(0));
window.status=str;//status 属性可设置或返回窗口状态栏中的文本。
document.title=str;//往标题栏中添加
//setTimeout("a()",500);
}
//setTimeout（）多少秒之后执行某函数（执行1次）
//setInterval() 每个多少秒执行某个函数（一直在执行）
setInterval("a()",500);
</script>
<body οnlοad="a()">
</body>
三、鼠标事件：onmouseover鼠标移入
onmouseout鼠标移除
onmousemove鼠标移动
onclick鼠标点击事件
onmouseup鼠标抬起事件
案例：
<body>
<div id="div" style="background-color:#F00; width:200px; height:200px;" οnmοuseοut="b()" οnmοuseοver="a()" οnmοusemοve="spana(event)"></div>
<span id="span" ></span>
</body>
<script type="text/jscript">
function a(){
var a=document.getElementById("div");
a.style.backgroundColor="blue";
}
function b(){
document.getElementById("div").style.backgroundColor="red";
}
function spana(e){
var x=e.clientX;
var y=e.clientY;
document.getElementById("span").innerHTML="x:"+x+",Y:"+y;
}
</script>
四、键盘事件：onkeydown键盘按下，获得按下的键盘对应的按键码
onkeyup键盘抬起，统计输入的字符个数
onkeypress
案例：
<script type="text/javascript">
function key(e){
switch(e.keyCode){
case 37:alert('左');
break;
case 38:alert('上');
break;
case 39:alert('右');
break;
case 40:alert('下');
break;
}
}
//这个句式e.keyCode;这个就是显示你的键盘上你按的键的unicode字符码，获得unicode字符码值
//keyCode是event的一个属性
//onkeydown某个键盘按键被按下。就会触发这个事件
</script>
<body οnkeydοwn="key(event)">
五、表单事件：onsubmit提交表单前调用
onreset重置表单前调用
案例：
<script type="text/javascript">
function a(){
//
var username=document.getElementById("username").value;
//用户名 字母开头，之后可以是字母数字下划线，5~12
var reg=/^[a-zA-Z]\w{4,11}$/;
if(reg.test(username)){
return true;
}else{
return false;
}
}
</script>
<body>
<form action="#" method="post" οnsubmit="return a()">
用户名：<input type="text" id="username"><br />
密码：<input type="password" id="password"><br />
<input type="submit" value="提交"></form>
<span id="span"></span>
</body>
扫一扫
3895
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
