js Dom binding keyboard or mouse events for elements in a page

html mouse event

onload page load

onclick mouse click

onmouseover mouse in

onmouseout mouse out

onfocus get focus

onblur loses focus

Content change of onchang E domain

In event firing, this represents a reference to the current dom object

1. html events, binding events directly on html elements

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .btn{
            width:140px;
            height:30px;
            background:#abcdef;
            line-height:30px;
            text-align: center;
            font-size:14px;
            border-radius:5px;
            cursor:pointer;
        }
        div{
            width:140px;
            height:140px;
            background:#abcdef;
            line-height:140px;
            text-align: center;
            font-size:14px;
            margin:50px 0;
        }
    </style>
</head>
<body>
    <button id="btn" class="btn" onclick="alert('I was clicked!');">I am the button.</button>
    <div onmouseover="myFun(this,'orange')" onmouseout="myFun(this,'pink')">I am div</div>
    <script>
        function myFun(obj,bgcolor){
            obj.style.backgroundColor=bgcolor;
        }

    </script>
</body>
</html>

 

DOM 0 level

Get elements through dom and bind events

If the event binding is followed by the function name, do not add brackets, otherwise you do not need to click, and the function will be triggered as soon as the page is refreshed

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .btn{
            width:140px;
            height:140px;
            background:#abcdef;
            line-height:140px;
            text-align: center;
            font-size:14px;
            margin:50px 0;
        }
        .btn-active{
            width:140px;
            height:140px;
            line-height:140px;
            text-align: center;
            font-size:14px;
            margin:50px 0;
            background:pink;
        }
    </style>
</head>
<body>
    <div id="btn" class="btn">Unlock</div>
    <script>
        var btn=document.getElementById("btn");
        btn.onclick=myFun;//There must be no parentheses after the function, otherwise it will be called directly without clicking
        function myFun(){
            if(this.className=="btn"){
                this.className="btn-active";
                this.innerHTML="locking";
            }else{
                this.className="btn";
                this.innerHTML="Unlock";
            }
        }

    </script>
</body>
</html>

 

When the script to get dom element is placed in front of the element, an error will be reported

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .btn{
            width:140px;
            height:140px;
            background:#abcdef;
            line-height:140px;
            text-align: center;
            font-size:14px;
            margin:50px 0;
        }
        .btn-active{
            width:140px;
            height:140px;
            line-height:140px;
            text-align: center;
            font-size:14px;
            margin:50px 0;
            background:pink;
        }
    </style>
        <script>
        var btn=document.getElementById("btn");
        btn.onclick=myFun;//There must be no parentheses after the function, otherwise it will be called directly without clicking
        function myFun(){
            if(this.className=="btn"){
                this.className="btn-active";
                this.innerHTML="locking";
            }else{
                this.className="btn";
                this.innerHTML="Unlock";
            }
        }

    </script>
</head>
<body>
    <div id="btn" class="btn">Unlock</div>

</body>
</html>

Write the script in the window.onload event to ensure that the element has been generated

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .btn{
            width:140px;
            height:140px;
            background:#abcdef;
            line-height:140px;
            text-align: center;
            font-size:14px;
            margin:50px 0;
        }
        .btn-active{
            width:140px;
            height:140px;
            line-height:140px;
            text-align: center;
            font-size:14px;
            margin:50px 0;
            background:pink;
        }
    </style>
    <script>
        window.onload=function(){
            var btn=document.getElementById("btn");
            btn.onclick=myFun;//There must be no parentheses after the function, otherwise it will be called directly without clicking
            function myFun(){
                if(this.className=="btn"){
                    this.className="btn-active";
                    this.innerHTML="locking";
                }else{
                    this.className="btn";
                    this.innerHTML="Unlock";
                }
            }
        }
    </script>
</head>
<body>
    <div id="btn" class="btn">Unlock</div>

</body>
</html>

onfocus event and onblur event

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #tip{display: none;}
    </style>
    <script>
        window.onload=function(){
            var password=document.getElementById("password");
            var tip=document.getElementById("tip");
            password.onfocus=function(){
                tip.style.display="inline-block";
            }
            password.onblur=function(){
                var val=this.value;
                // The password is 6 digits
                if(val.length==6 && !isNaN(val)){
                    tip.innerHTML="ok";
                }else{
                    tip.innerHTML="error";
                }
            }
        }
    </script>
</head>
<body>
    <input type="password" id="password" name="password">
    <span id="tip">Please input a password</span>
</body>
</html>

 

Get the body element document.body

When the option in select is selected, the value of select will be equal to the value of the selected option

Therefore, you can use this.value to get the value of the selected option

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            width:100%;
            height:100%;
        }
    </style>
    <script>
        window.onload=function(){
            var menu=document.getElementById("menu");
            menu.onchange=function(){
                var color=this.value;
                if(color==""){ 
                    document.body.style.backgroundColor="#fff";
                }else{ 
                    document.body.style.backgroundColor=color;
                }
            }
        }
    </script>
</head>
<body>
    <p>Please choose your favorite color</p>
    <select name="menu" id="menu">
        <option value="">Please choose</option>
        <option value="orange">Vitality orange</option>
        <option value="pink">Fairy powder</option>
        <option value="#abcdef">Moron blue</option>
    </select>
</body>
</html>

 

Mouse events

onmousedown mouse down

onmousemove mouse within element

onmouseup mouse release

On resize browser window

onscroll drag the scroll bar

The onsubmit form submission is added to the form form, not to the submit button

onmousedown+onmouseup=onclick

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            width:100%;
            height:100%;
        }
        div{
            width:200px;
            height:200px;
            background:#abcdef;
            overflow: auto;
        }
        #myform{
            margin-top:50px;
        }
    </style>
    <script>
        window.onload=function(){
            var div=document.getElementById("div");
            div.onmousedown=function(){
                this.innerHTML="onmousedown";
            }
            div.onmousemove=function(){
                this.innerHTML="onmousemove";
            }
            div.onmouseup=function(){
                this.innerHTML="onmouseup";
            }
            window.onresize=function(){
                console.log("resized");
            }
            div.onscroll=function(){
                this.style.color="orange";
            }

            var myform=document.getElementById("myform");
            myform.onsubmit=function(){
                alert("Form submitted~");
            }
        }
    </script>
</head>
<body>
    <div id="div">
        //Written words<br>Written words<br>Written words<br>Written words<br>Written words<br>Written words<br>Written words<br>Written words<br>Written words<br>Written words<br>Written words<br>Written words<br>Written words<br>Written words<br>Written words<br>Written words<br>Written words<br>Written words<br>Written words<br>Written words<br>Written words<br>Written words<br>Written words<br>Written words<br>Written words<br>Written words<br>Written words<br>Written words<br>Written words<br>Written words<br>Written words<br>Written words<br>Written words<br>Written words<br>Written words<br>Written words<br>Written words<br>Written words<br>
    </div>
    <form id="myform">
        <input type="submit">
    </form>
</body>
</html>

 

Keyboard events

onkeydown key pressed

onkeypress is pressed (only letters + numbers + symbols)

onkeyup keyboard released

keyCode

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            width:100%;
            height:100%;
        }
    </style>
    <script>
        window.onload=function(){
            var count=document.getElementById("count");
            var text=document.getElementById("text");

            text.onkeyup=function(e){
                console.log(e.keyCode);
                var len=text.value.length;
                count.innerHTML=30-len;
            }
        }
    </script>
</head>
<body>
    <p>You can also enter<span id="count">30</span>/30</p>
    <textarea name="text" id="text" cols="60" rows="3"></textarea>
</body>
</html>

Tags: Javascript

Posted on Wed, 05 Feb 2020 11:06:51 -0500 by louis_coetzee