事件总结

来源：互联网发布：nero刻录软件序列号编辑：程序博客网时间：2024/05/21 08:42

一、
(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="请输入用户名"     onfocus="clearInput()" onblur="getInput()">
     内容改变事件(onchange)
     <body>
<select id="select" onchange="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()

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" onmousemove="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="全选" onclick="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" onsubmit="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" onkeyup="sum()" ></textarea>
<span id="span1"></span>
</body>
</html>