js事件类型-绑定事件

2021-03-01 08:28

阅读:702

标签:标签   焦点   back   oninput   blank   pre   页面   UNC   java   

更多事件:点击查询

load事件:

script type="text/javascript">
    //整个页面窗口加载完成之后(所有标签加载完成)
    window.onload = function(){
        //防止  js在前,标签在后的情况,js执行 时 标签没有加载完成
        // alert(‘我加载完啦‘);
        // 
    }
script>

鼠标事件:

 

script>
    var d = document.getElementById(d);

    // mouseenter   mouseleave  不区分子元素(鼠标从父元素移动到子元素,不触发)
        d.onmouseenter = function(){
            console.log(enter);
        }
        d.onmouseleave = function(){
            console.log(leave);
        }
    //当鼠标悬浮时触发
    d.onmouseover = function(){
        console.log(来了?);
    }
    //当鼠标离开时触发
        d.onmouseout = function(){
            console.log(不要啊);
        }
    //当鼠标按下时触发
        d.onmousedown = function(){
            console.log(用力啊);            
        }
    //当鼠标弹起时触发
        d.onmouseup = function(){
            console.log(再来);            
        }
    //当鼠标移动时触发
        d.onmousemove = function(){
            console.log(别乱动);            
        }
        
        //当点击右键时
        d.oncontextmenu = function(){
            console.log(你想干什么?);
            return false;//不让菜单出来
        }
        
        // 当复制内容时
        d.oncopy = function(){
            console.log(你敢复制我?);
            return false;
        }
    
script>

 

键盘事件:

    input id="demo" type="text" value="">
    

    script>
    
        var k = document.getElementById(demo);
    
        k.onkeydown = function(){
            console.log(键盘被按下时触发);
        }

        k.onkeypress = function(){
            console.log(键盘被按下时触发,晚于down);
        }
 
        k.onkeyup = function(){
            console.log(键盘被松开触发);
        }

    script>

表单事件:

input type="text" id="t" value="">
script>
    var d = document.getElementById(t);
    //当内容改变且失去焦点时触发
    d.onchange = function(){
        console.log(内容改变了且失去焦点触发);
    }
    //当内容改变时触发
    d.oninput = function(){
        console.log(内容改变时触发);
    }

    //更多看手册
script>

 

绑定事件思路:

script type="text/javascript">
    //绑定事件思路&步骤
    //1.找标签 
    var d = document.getElementById(t);
    //2.绑定事件  标签.on事件名称 = 函数
    d.onchange = function(){
        //3.具体的处理 --触发事件后要做的事情
    }
script>

 

js事件类型-绑定事件

标签:标签   焦点   back   oninput   blank   pre   页面   UNC   java   

原文地址:https://www.cnblogs.com/dazahui/p/14422697.html


评论


亲,登录后才可以留言!