各种事件（html事件，鼠标事件，键盘事件，焦点事件以及阻止默认事件）

短命女 2021-10-24 03:24 558阅读 0赞

HTML事件

onload 事件  页面或图片加载完成后执行 只有图片和页面可以执行

window.οnlοad=function(){
        //整个页面加载完时，执行此函数
        var box=document.getElementById('box');
        console.log(box);
    }

onerror 事件 事件在 加载外部文件 发生错误是触发

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
        </head>
        <body>
            <img οnerrοr='cuo()' src="https://imgcps.jd.com/ling/11943278661/5aWz6Z6L6ZmQ5pe256eS5" />
            <script>
                //onload当页面或者图片加载完时，
                function cuo(){
                    alert('图片找不到');
                }
            </script>
        </body>
    </html>

onscroll 滚动条滚动式触发

//onresize当window发生大小改变时

window.οnresize=function(){
        console.log(window.innerWidth);
    }
    //onresize当window发生大小改变时

鼠标事件

ondblclick//'双击时触发';

onmousedown//'当鼠标被按下时';

onmouseup//当鼠标抬起时';

onmouseenter//'当鼠标移入时';

onmouseleave//当鼠标移出时';

onmousemove //当鼠标移动时触发

onmouseover//鼠标移入时'

onmouseout//'鼠标移出时'

oncontextmenu//'鼠标右键时';//默认事件，就是不写js本身具有一定的功能

onwheel//鼠标滚轮在元素上下滚动时

整体案例

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style>
                div{width:80px;height:80px;border:1px dashed red;}
            </style>
        </head>
        <body>
            <div id="box1"></div>
            <div id="box2"></div>
            <div id="box3"></div>
            <div id="box4"></div>
            <div id="box5"></div>
            <div id="box6"></div>
            <div id="box7"></div>
            <div id="box8"></div>
            <div id="box9"></div>
            <div id="box10"></div>
            <script>
                function ele(a){
                    var box=document.getElementById(a);
                    return box;
                }
                var box1=ele('box1');
                var box2=ele('box2');
                var box3=ele('box3');
                var box4=ele('box4');
                var box5=ele('box5');
                var box6=ele('box6');
                var box7=ele('box7');
                var box8=ele('box8');
                var box9=ele('box9');
                var box10=ele('box10');
                box1.ondblclick=function(){
                    this.innerHTML='双击时触发';
                }
                box2.onmousedown=function(){
                    this.innerHTML='当鼠标被按下时';    
                }
                box3.onmouseup=function(){
                    this.innerHTML='当鼠标抬起时';
                }
                box4.onmouseenter=function(){
                    this.innerHTML='当鼠标移入时';
                }
                box5.onmouseleave=function(){
                    this.innerHTML='当鼠标移出时';
                }
                box6.onmousemove=function(e){
                    this.innerHTML=e.clientX+','+e.clientY;
                    //当鼠标移动时触发
                }
                box7.onmouseover=function(){
                    this.innerHTML='鼠标移入时';        
                }
                box8.onmouseout=function(){
                    this.innerHTML='鼠标移出时';
                }
                box9.oncontextmenu=function(e){
                    e.preventDefault();//阻止默认事件
                    this.innerHTML='鼠标右键时';
                }
                //默认事件，就是不写js本身具有一定的功能
                box10.οnwheel=function(){
                    this.innerHTML='滚动了';
                    //鼠标滚轮在元素上下滚动时
                }
            </script>
        </body>
        
    </html>

键盘事件

onkeydown键盘按下时触发的事件   可以结合keyCode值可以具体给某个按键添加功能

window.οnkeydοwn=function(){//一般常用与对文本框限制数量时使用
        document.write('键盘被按下')
    }

onkeyup键盘被松开时触发的事件

window.οnkeyup=function(){
        document.write('键盘被松开时');
    }

window.οnkeydοwn=function(e){
        box.innerHTML=e.keyCode;//按键值
        if(e.keyCode==13){
            alert('提交成功');
        }
    }
    //onkeydown结构keyCode值可以具体给某个按键添加功能

键盘被按下 ，松开时触发事件

window.οnkeypress=function(){
        document.write('键盘被按下并松开时');
    }

转载于:https://www.cnblogs.com/GreenRadish/p/11169118.html