您的位置：首页 > Web前端 > JavaScript

JavaScript鼠标事件2

2017-11-01 19:19 274 查看
1、onload：页面加载时触发

<script type="text/javascript">
//页面加载时执行
window.onload=function(){
//获取box
var box = document.getElementById("box");
var clicked=function(){
alert('我被点击了');
}
box.onclick = clicked;
}
</script>
</head>
<body>
<div id = "box">这是一个DIV</div>
</body>


注意： window.onload的作用是页面加载完成后再执行脚本。

2、 onfocus：获得焦点时触发

onblur：失去焦点时触发

<style>
.box{
padding:50px;
}
.left,.tip{
float:left;
}
.left{
margin-right: 10px;
}
.tip{
display:none;
font-size:14px;
}
</style>
<script type="text/javascript">
window.onload = function() {
//获取文本框
var phone =  document.getElementById("phone"),
tip = document.getElementById("tip");
//给文本框绑定激活事件
phone.onfocus = function() {
//让tip显示出来
tip.style.display = 'block';
}
//给文本框绑定失去焦点的事件
phone.onblur = function(){
//获取文本框的值，value用于获取表单元素的值
var phoneVal = this.value;
//判断手机号码是否是11位的数字
//如果输入正确，则显示对号图标，否则显示错号图标
if (phoneVal.length==11 && isNaN(phoneVal)==<
4000
span class="hljs-literal">false){
tip.innerHTML = '<img src = img/right.png>';
} else{
tip.innerHTML = '<img src = img/fause.png>';

}
}
}
</script>
</head>
<body>
<div class = "box">
<div class = "left">
<input type = "text" id = "phone" placeholder="请输入手机号">
<div class = "tip" id = "tip">请输入有效的手机号码</div>
</div>
</div>
</body>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航