javascript事件加强及案例

最新推荐文章于 2025-02-10 12:00:00 发布

pqx1993

最新推荐文章于 2025-02-10 12:00:00 发布

阅读量506

点赞数

本文链接：https://blog.youkuaiyun.com/pqx1993/article/details/8623556

版权

一、
(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()

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>