JavaScript鼠标事件2

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">这是一个DIVdiv>
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)==false){
              tip.innerHTML = '';
         } else{
            tip.innerHTML = '';

         }
        }
           }
    script>
head>
<body>
    <div class = "box">
    <div class = "left">
    <input type = "text" id = "phone" placeholder="请输入手机号">
    <div class = "tip" id = "tip">请输入有效的手机号码div>
    div>
    div>
body>

你可能感兴趣的