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

最新推荐文章于 2022-07-21 16:00:00 发布

IManiy

最新推荐文章于 2022-07-21 16:00:00 发布

阅读量215

点赞数

分类专栏：前端文章标签： JavaScript

本文链接：https://blog.csdn.net/IManiy/article/details/82825239

版权

前端专栏收录该内容

31 篇文章 1 订阅

订阅专栏

事件监听

简单事件监听
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个字了哦");
        }
    }

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

    <script>
        window.onload =init;
        function init() {
            //获取下拉菜单
            var menu =document.getElementById("bgselect");
            //给菜单绑定change事件,一般作用于select或CheckBox或radio
            menu.onchange =function () {
                //获取当前选中的值
                var bgcolor =this.value;
                var bgcolor =menu.options[menu.selectedIndex].value;
                if (bgcolor == ""){
                    document.body.style.background="#fff";
                }else {
                    //设置body的背景色
                    document.body.style.background=bgcolor;
                }

            }
        }
    </script>
</head>
<body>
<div class="box">
    请选择您喜欢的背景色：
    <select name="bgselect" id="bgselect">
        <option value="">请选择</option>
        <option value="#f00">红色</option>
        <option value="#0f0">蓝色</option>
        <option value="#ff0">黄色</option>
        <option value="#ccc">灰色</option>
    </select>

</div>

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

<input id="i1" type="text" value="请输入账号"/>

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