复习之JavaScript基本语法（六）——事件监听总汇

我就是我 2022-05-10 01:06 184阅读 0赞

## 事件监听 ##

简单事件监听  
btn.onclick 点击事件

<div class="box" id="box">
        <H1> 测试模块</H1>
        <H1> 测试模块</H1>
        <H1> 测试模块</H1>
        <H1> 测试模块</H1>
        <H1> 测试模块</H1>
        <H1> 测试模块</H1>
    </div>
    <script>
        var box =document.getElementById("box");
        //绑定按下的事件
        box.onmousedown =function () {
            console.log("我被按下了");
        }
        //绑定移动的事件
        box.onmousemove=function () {
            console.log("我被移动了");
        }
        box.onmouseup =function () {
            console.log("我被松开了");
        }
        window.onresize=function () {
            console.log("我的浏览器尺寸被改变了");
    
        }
        box.onscroll =function () {
            console.log("我被拖动了");
        }
    </script>

## 验证手机号 ##

//验证手机号
    <input type="text" id="phone" placeholder="请输入手机号码">
    <p id="tip" style="display: none">请输入有效的手机号码</p>
    <script>
        var phone=document.getElementById("phone");
        var tip =document.getElementById("tip")
        //文本框获取焦点时
        phone.onfocus=function () {
            //让tip显示
            tip.style.display='block';
            //tip.style.display='none';//隐藏
        }
        }
        //文本框失去焦点时
        phone.onblur=function () {
            //获取文本框的值
            var phoneVal =this.value;
            //如果正确
            if (phoneVal.length==11 && isNaN(phoneVal) ==false){
                tip.innerHTML='ok';
            }else {
                tip.innerHTML='error';
            }
        }
    </script>

## 按钮颜色文字改变 ##

<div class="lock" id="btn">锁定</div>
    <script>
        //获取按钮
        var btn =document.getElementById("btn");
        //给按钮绑定事件
    btn.onclick=function () {
        // if(this.innerHTML=="锁定")
        if(this.className=="lock"){
        this.className="unlock";
        this.innerHTML="解锁";
        }else {
            this.className="lock";
            this.innerHTML="锁定";
        }
    
    }
    </script>

## 限制输入框字数 ##

*  onkeyup键盘点击事件

var total =30;
        var text=document.getElementById("text");
        var count =document.getElementById("count");
        //在事件触发的function里，用一个参数接受事件对象
        document.onkeyup =function (ev) {
            console.log(ev.keyCode)
            var len =text.value.length;
            var allow =total-len;
            count.innerHTML =allow;
            if(allow<=0){
                alert("超过30个字了哦");
            }
        }

## 根据下拉选项框改变背景色 ##

## 输入框焦点获取和丧失事件 ##

input1.onfocus =function () {
                    if (this.value=="请输入账号"){
                        this.value=""
                    }
                }
                input1.onblur =function () {
                    alert("你输入的内容："+this.value)
                }