js Dom为页面中的元素绑定键盘或鼠标事件

html鼠标事件

onload 页面加载

onclick 鼠标单击

onmouSEOver 鼠标移入

onmouSEOut 鼠标移出

onfocus 获取焦点

onblur 失去焦点

onchange 域的内容改变

在事件触发中，this表示对当前dom对象的引用

1、html事件，在html元素上直接绑定事件

<!DOCTYPE html>
<html lang="en"head>
    Meta charset="UTF-8"title>Document</style>
        .btn{
            width:140px;
            height30px
            background#abcdef
            line-height
            text-align center
            font-size14px
            border-radius5px
            cursorpointer;
        }
        div
            margin50px 0}
    bodybutton id="btn" class onclick="alert('我被点击啦！');">我是按钮buttondiv onmouSEOver="myFun(this,'orange')" onmouSEOut>我是divdivscript>
        function myFun(obj,bgcolor){
            obj.style.backgroundColor=bgcolor;
        }

    html>

DOM 0级

通过dom获取元素，并绑定事件

如果事件绑定跟的是函数名，千万不要加括号，否则不需要点击，页面一刷新即会触发函数


        .btn-activepink="btn">解锁var btndocument.getElementById("btn);
        btn.onclickmyFun;//此处函数后面一定不能加括号，否则不需要点击会直接调用
         myFun(){
            if(this.className==){
                btn-active;
                .innerHTML锁定;
            }else{
                解锁;
            }
        }

    >

当把获取dom元素的脚本，放置在元素的前面，会报错

>
        >

>

把脚本写在window.onload事件中，确保元素已经生成


        window.onload(){
            );
            btn.onclick此处函数后面一定不能加括号，否则不需要点击会直接调用
             myFun(){
                ){
                    ;
                    ;
                }{
                    ;
                }
            }
        }
    >

onfocus事件和onblur事件


        #tipdisplay none passwordpassword);
             tiptip);
            password.onfocus(){
                tip.style.displayinline-block;
            }
            password.onblur(){
                 val.value;
                 密码是6位数字
                (val.length6 && !isNaN(val)){
                    tip.innerHTMLok{
                    tip.innerHTMLerrorinput type="password" id name="password"span ="tip">请输入密码span>

获取body元素 document.body

当select中的option被选择时，select的value值就会等于被选中的option的value值

因此可以用this.value得到被选择的option的value值


        body100% menumenu);
            menu.onchange color(color""){ 
                    document.body.style.backgroundColor#fff{ 
                    document.body.style.backgroundColorcolor;
                }
            }
        }
    p>请选择你喜欢的颜色呀select name="menu"="menu"option value="">请选择option="orange">元气橙="pink">仙女粉="#abcdef">森系蓝select>

鼠标事件

onmousedown 鼠标按下

onmousemove 鼠标在元素内移动

onmouseup 鼠标松开

onresize 浏览器窗口大小调整

onscroll 拖动滚动条

onsubmit 表单提交加在form表单上，而不是加在提交按钮上

onmousedown+onmouseup=onclick

200px
            overflow auto
        #myform
            margin-top50px divdiv);
            div.onmousedownonmousedown;
            }
            div.onmousemoveonmousemove;
            }
            div.onmouseuponmouseup;
            }
            window.onresize(){
                console.log(resized);
            }
            div.onscroll.style.colororange;
            }

             myformmyform);
            myform.onsubmit(){
                alert(表单提交啦~);
            }
        }
    ="div">
        文字br>文字form ="myform"="submit"form>

键盘事件

onkeydown 键盘被按下

onkeypress 键盘被按下（只有字母+数字+符号）

onkeyup 键盘被释放

keyCode 键码

 countcount texttext);

            text.onkeyup(e){
                console.log(e.keyCode);
                 lentext.value.length;
                count.innerHTML30-len;
            }
        }
    >还可以输入="count">30>/30textarea ="text" cols="60" rows="3"></textarea>

js Dom为页面中的元素绑定键盘或鼠标事件

猜你在找的JavaScript相关文章