Event事件对象

change　　文本改变事件　：用于input表单 文本改变的时候触发

error　　加载错误事件　　：当加载出错和失败的时候触发

load　　加载事件　　：加载事件，一般用于预加载或window.onload=function  window.addEventListener("load",function(){});

submit　　提交事件"　　：用于from表单提交时触发，触发的不是按钮 是from  一定要取消默认行为

reset　　重置事件　　　　：用于from表单重置时触发，触发的不是按钮 是from 

resize　　改变尺寸事件　　：配合rem使用  屏幕自定义适应

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html{
            font-size: 200px;
        }
        img{
            width: 1rem;
            height: 1rem;
        }
    </style>
</head>
<body>
    <img src="./icon/1.png" alt="">
    <script>
        window.addEventListener("resize",resizeHandler);
        function resizeHandler(e){
            var size=document.documentElement.clientWidth/1920;
            document.documentElement.style.fontSize=size*100+"px";
            console.log(size);
        }   
    </script>
</body>
</html>

focus　　获取焦点事件　　：按tab键 获取焦点的时候触发  其中e.热；relatedTarget 上一次焦点的对象

blur　　失去焦点事件　　：失去焦点的时候触发  如input中有个 placeholder 提示出入啥  可以使用 focus和blur 来实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" >

    <script>
        var input=document.querySelector("input");
        input.addEventListener("focus",inputhoudler);
        input.value="姓名";
        input.addEventListener("blur",inputhoudler);
        function inputhoudler(e){
            if(e.type==="blur"){
                if(this.value.length===0){
                    this.value="姓名";
                }
            }else if(e.type==="focus"){
                if(this.value==="姓名"){
                    this.value="";
                }
            }
        }
    </script>
</body>
</html>

 input 事件

DOM.addEventListner("input",inputHandler);

e.data 是当前输入的内容

e.inputType 显示当前是什么操作   插入文本 删除文本

e.isComposing 是否启用输入法

如果一个input的框不能输入中文，可不可以做到？ 后面学习正则表达式的时候可以使用！

 

keyboard事件

　　keydown和keyup 一般是配合使用的

e.code  当前按下的键　　Key+键名

e.key　　当前按下的键　　键名

e.keycode　　键码值　　最常用的是这个

 

滚轮事件

火狐浏览器使用DOMMouseScroll

其他浏览器使用mousewheel

 

下拉菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #sanjiao{
            display:inline-block;
            width: 0px;
            height: 0px;
            border-top: 10px solid #000000;
            border-left: 6px solid transparent;
            border-right: 6px solid transparent;
            position: absolute;
            right: 10px;
            top: 10px;
        }
        #button{
            width: 120px;
            height: 25px;
            border: 1px solid #000000;
            position: relative;
        }
        #button:first-child{
            font-size: 16px;
        }
        ul{
            display: none;
            width: 120px;
            border: 1px solid #000000;
            list-style: none;
            position: absolute;
            top: 25px;
        }
        li{
            border-bottom: 1px solid #000000;
            text-align: center;
        }
        /* li 标签最后一个样式 */
        li:last-of-type{
            border-bottom: unset;
        }
        li:hover{
            background-color: #999999;
            cursor: default;
        }
    </style>
</head>
<body>
    
    <div id="button">
        <span></span><span id="sanjiao"></span>
    </div>
    <ul id="menu">
      
    </ul>


    <script>
        var list=["北京","上海","长春","德惠","大连","沈阳"];
        var btn,menu;
        btn=document.querySelector("#button");
        menu=document.querySelector("#menu");
        for(var i=0;i<list.length;i++){
            var li =document.createElement("li");
            li.textContent=list[i];
            menu.appendChild(li);
        };
        btn.addEventListener("click",clickHnadler);
        menu.addEventListener("click",liclickHandler);


        function clickHnadler(e){
            menu.style.display="block";
        }

        function liclickHandler(e){
            btn.firstElementChild.textContent=e.target.textContent;
            menu.style.display="none";
            
        }

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

 

 

 

 

 

 

 

 

...........就不一一介绍了

posted @ 2020-09-28 14:50  WhiteSpace  阅读(239)  评论(0)    收藏  举报