js-事件细节详解以及案例

在众多事件当中，需要注意的几点是，

1、blur和change的相同和区别：

　　两者都是在失去焦点时触发，他们的区别是blur是只要失去焦点就会触发，而change是在失去焦点的同时还要判断绑定元素的值和上一次值是否相同，相同则不触发，反之则触发；

2、click、mousedown、mouseup

　　值得注意的是click点击事件包括一次鼠标按下和一次鼠标抬起

3、dblclick、mousedown、mouseup

　　值得注意的是dblclick点击事件包括两次鼠标按下和两次鼠标抬起

事件分类

  • 鼠标类

    单击：click

    双击：dblclick

    按下：mousedown

    抬起：mouseup

    移动：mousemove

    进入：mouseover / mouseenter

    离开：mouseout / mouseleave

    右键：contextmenu

  • 键盘类

    按下：keydown

    抬起：keyup

    按下并抬起：keypress

  • 表单类

    获取焦点：focus

    失去焦点：blur

    输入：input

    内容改变：change

    提交事件：submit

    重置事件：reset

  • 浏览器类

    加载：load

    滚动：scroll

    改变大小：resize

  • on绑定，赋值式绑定

　　　元素.on事件名 = function(){}

　

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #box{width: 100px;height: 100px;background: red}
    </style>
</head>
<body>
    <div id="box"></div>
    <input type="text" id="txt">
</body>
<script>
    // 鼠标事件测试

    var box = document.getElementById("box");
    box.onclick = function(){
        console.log("单击事件发生了")
    }
    box.ondblclick = function(){
        console.log("双击事件发生了")
    }
    box.onmousedown = function(){
        console.log("按下事件发生了")
    }
    box.onmouseup = function(){
        console.log("抬起事件发生了")
    }
    box.onmouseover = function(){
        console.log("进入事件发生了")
    }
    box.onmouseout = function(){
        console.log("离开事件发生了")
    }
    box.onmousemove = function(){
        console.log("移动事件发生了")
    }
    box.oncontextmenu = function(){
        console.log("右键事件发生了");
    }

    // 表单事件测试

    var txt = document.getElementById("txt");
    txt.onfocus = function(){
        console.log("获取焦点事件")
    }
    txt.onblur = function(){
        console.log("失去焦点事件")
    }
    txt.oninput = function(){
        console.log("输入事件")
    }
    txt.onchange = function(){
        console.log("改变内容事件")
    }   
</script>
</html>

 如果感觉对自己有帮助，麻烦点一下关注，会一直和大家分享知识的，谢谢！！！

posted @ 2020-04-27 10:01  飘逸_winxin  阅读(208)  评论(0)  编辑  收藏  举报