事件总结-CSDN博客

本文链接：https://blog.csdn.net/wangmin_12/article/details/8841967

一、
(1) 一般事件：
获得焦点事件（onfocus）
失去焦点事件(onblur)
<script>
function clearInput()
{
//获得输入框的值
var username=document.getElementById('user');
username.value='';
}
function getInput()
{
//获得输入框的值
var username=document.getElementById('user');
username.value='请输入用户名';
}
</script>
<input type="text" id="user" value="请输入用户名" οnfοcus="clearInput()" οnblur="getInput()">
内容改变事件(onchange)
<body>
<select id="select" οnchange="changeCont()">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<div id="div1">改变字体的大小</div>
</body>
<script>
function changeCont()
{
var num=document.getElementById("select");
var optValue=num.value;
var divCont=document.getElementById('div1');
divCont.style.fontSize=(optValue*10)+'px';
}
</script>

(2)、页面事件:
onload()

<script type="text/javascript">
var str="欢迎来到我的空间";
function Move()
{
str=str.substr(1)+str.charAt(0);
window.status=str;
document.title=str;
}
setInterval("Move()",500);
</script>
<body οnlοad="Move()">
(3)、键盘事件：
1、onkeydown(键盘按下)(获得按下的键盘对应的按键码)
<script>
function key(e)
{
switch(e.keyCode)
{
case 37:alert('左');
break;
case 38:alert('上');
break;
case 39:alert('右');
break;
case 40:alert('下');
break;
}
}
</script>
<body οnkeydοwn="key(event)">
2、onkeyup(键盘抬起)(统计输入的字符个数)

<script>
function sum()
{
//获得用户输入的字符
var str=document.getElementById('text');
var cont=str.value;
//统计用户输入的字符串的长度
var len=cont.length;
while(len<5)
{
document.getElementById('span1').innerHTML="您当前输入了"+len+"个字符";
}
}
</script>
<body>
<textarea id="text" cols="15" rows="5" οnkeyup="sum()" ></textarea>
<span id="span1"></span>
(4)、鼠标事件：
1、onmouseover(鼠标移入)
2、onmouseout(鼠标移除)
<div id="div1" style="width:200px;height:150px;background:red" οnmοuseοver="ChangeColor()" οnmοuseοut="Change()"></div>
</body>
<script>

function ChangeColor()
{
//找到div

var div=document.getElementById("div1");
div.style.backgroundColor="blue";
}
function Change()
{
//找到div

var div=document.getElementById("div1");
div.style.backgroundColor="red";
}
</script>
3、onmousemove(鼠标移动)(获得坐标时使用)
<div id="div1" style="width:200px;height:150px;background:red" οnmοusemοve="cor(event)"></div>
<span id="span1" style="width:300;height:300;"></span>

</body>
<script>
function cor(e)
{
var x,y;
x=e.clientX;
y=e.clientY;
document.getElementById('span1').innerHTML="X:"+x+",Y:"+y;
}
</script>
4、onclick()
function selectAll()
{
for(var i=1;i<=3;i++)
{
document.getElementById("chec"+i).checked=true;
}
}
<input type="button" value="全选" οnclick="selectAll()">

(5)、表单事件：
onsubmit
function validate()
{
//获得用户名
var username=document.getElementById('username');
var val=username.value;
var reg=/^[a-zA-Z]\w{4,11}$/;
if(reg.test(val))
{return true;}
else{return false;}
}
</script>
<form action="#" method="post" οnsubmit="return validate()">
用户名:<input type="text" id="username">
<input type="submit" value="提交" >
</form>

二、文本域输入超过100字符后提示

<html>
<head>
</head>
<script>
function sum()
{
//获得用户输入的字符
var str=document.getElementById('text');
var cont=str.value;
//统计用户输入的字符串的长度
var len=cont.length;

document.getElementById('span1').innerHTML="您当前输入了"+len+"个字符";
if(len>100)
{alert("输入的字符超过100个")}
}
</script>
<body>
<textarea id="text" cols="15" rows="5" οnkeyup="sum()" ></textarea>
<span id="span1"></span>
</body>
</html>