JavaScript鼠标事件2-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_36910110/article/details/78417461

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)==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>