JavaScript鼠标事件2

来源：互联网发布：清北学霸知乎编辑：程序博客网时间：2024/06/08 06:06

1、onload：页面加载时触发

    <script type="text/javascript">        //页面加载时执行 window.onload=function(){    //获取boxvar 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>

阅读全文

0 0