Javascript鼠标键盘事件

Posted 萌-萌

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Javascript鼠标键盘事件相关的知识,希望对你有一定的参考价值。

鼠标事件
click:单击
dblclick:双击
mousedown:鼠标按下
mouseup:鼠标抬起
mouseover:鼠标悬浮
mouseout:鼠标离开
mousemove:鼠标移动
mouseenter:鼠标进入
mouseleave:鼠标离开

    <button onclick="myClick()">鼠标单击</button>
    <button ondblclick="myDBClick()">鼠标双击</button>
    <button onmousedown="myMouseDown()" onmouseup="myMouseUp()">鼠标按下和抬起</button>
    <button onmouseover="myMouseOver()" onmouseout="myMouseOut()">鼠标悬浮和离开</button>
    <button onmousemove="myMouseMove()">鼠标移动</button>
    <button onmouseenter="myMouseEnter()" onmouseleave="myMouseLeave()">鼠标进入和离开</button>

    <script>
        function myClick() {
            console.log("你单击了按钮!");
        }
        function myDBClick() {
            console.log("你双击了按钮!");
        }
        function myMouseDown() {
            console.log("鼠标按下了!");
        }
        function myMouseUp() {
            console.log("鼠标抬起了!");
        }
        function myMouseOver() {
            console.log("鼠标悬浮!");
        }
        function myMouseOut() {
            console.log("鼠标离开!")
        }
        function myMouseMove() {
            console.log("鼠标移动!")
        }
        function myMouseEnter() {
            console.log("鼠标进入!")
        }
        function myMouseLeave() {
            console.log("鼠标离开!")
        }

键盘事件
keydown:按键按下
keyup:按键抬起
keypress:按键按下抬起

    <body>
    <input id="name" type="text" onkeydown="myKeyDown(this.id)" onkeyup="myKeyUp(this.id)">
    </body>

    <script>
        /*输出输入的字符*/
        function myKeyDown(id) {
            console.log(document.getElementById(id).value);
        }
        /*按键结束,字体转换为大写*/
        function myKeyUp(id) {
            var text = document.getElementById(id).value;
            document.getElementById(id).value = text.toUpperCase();
        }
    </script>

html事件
load:文档加载完成
select:被选中的时候
change:内容被改变
focus:得到光标
resize:窗口尺寸变化
scroll:滚动条移动

    <body onload="loaded()">
    <div style="height: 3000px" ></div>
    <input type="text" id="name" onselect="mySelect(this.id)">
    <input type="text" id="name2" onchange="myChange(this.id)">
    <input type="text" id="name3" onfocus="myFocus()">
    </body>

    <script>
        window.onload = function () {
            console.log("文档加载完毕!");
        };
        /*window.onunload = function () {
         alert("文档被关闭!");
         };*/
        /*打印选中的文本*/
        function mySelect(id) {
            var text = document.getElementById(id).value;
            console.log(text);
        }
        /*内容被改变时*/
        function myChange(id) {
            var text = document.getElementById(id).value;
            console.log(text);
        }
        /*得到光标*/
        function myFocus() {
            console.log("得到光标!");
        }
        /*窗口尺寸变化*/
        window.onresize = function () {
            console.log("窗口变化!")
        };
        /*滚动条移动*/
        window.onscroll = function () {
            console.log("滚动");
        }
    </script>

事件模型:

    <body>
    <!--脚本模型:行内绑定-->
    <button onclick="alert(‘hello‘)">hello</button>
    <!--内联模型-->
    <button onclick="showHello()">hello2</button>
    <!--动态绑定-->
    <button id="btn">hello3</button>
    </body>

    <script>
        function showHello() {
            alert("hello");
        }
        /*DOM0:同一个元素只能添加一个同类事件
         * 如果添加多个,后面的会把前面的覆盖掉*/
        var btn = document.getElementById("btn");
        btn.onclick = function () {
            alert("hello");
        };
        btn.onclick = function () {
            alert("hello world");
        };
        /*DOM2:可以给一个元素添加多个同类事件*/
        btn.addEventListener("click", function () {
            alert("hello1");
        });
        btn.addEventListener("click", function () {
            alert("hello2");
        });
        /*不同浏览器的兼容写法*/
        /*IE*/
        if (btn.attachEvent) {
            btn.attachEvent("onclick", function () {
                alert("hello3");
            });
        /*W3C*/
        } else {
            btn.addEventListener("click", function () {
                alert("hello4");
            })
        }
    </script>

事件冒泡与事件捕获:

     <style>
            #div1{
                width: 400px;
                height: 400px;
               
            }
            #div2{
                width: 300px;
                height: 300px;
                background-color: #33ff66;
            }
            #div3{
                width: 200px;
                height: 200px;
                background-color: #fff24a;
            }
            #div4{
                width: 100px;
                height: 100px;
                background-color: #ff4968;
            }
        </style>

     <title>事件冒泡、事件捕获</title>
    </head>
    <body>
    <div id="div1">
        <div id="div2">
            <div id="div3">
                <div id="div4">
     
                </div>
            </div>
        </div>
    </div>
    </body>

    <script>
        var div1 = document.getElementById("div1");
        div1.addEventListener("click",function (event) {
            /*阻止事件冒泡*/
            event.stopPropagation();
            alert("div1");
        },false);
        var div2 = document.getElementById("div2");
        div2.addEventListener("click",function (event) {
            /*阻止事件冒泡*/
            event.stopPropagation();
            alert("div2");
        },false);
        var div3 = document.getElementById("div3");
        div3.addEventListener("click",function (event) {
            /*阻止事件冒泡*/
            event.stopPropagation();
            alert("div3");
        },false);
        var div4 = document.getElementById("div4");
        div4.addEventListener("click",function (event) {
            /*阻止事件冒泡*/
            event.stopPropagation();
            alert("div4");
        },false);
    </script>

阻止默认事件:

    <body>
    <a href="http://www.baidu.com" onclick="stop(event)">百度</a>
    </body>

    <script>
        function stop(event) {
            if (event.preventDefault()) {
                event.preventDefault();
            } else {
                event.returnValue = false;
            }
            alert("不跳转!")
        }




















































































































































































































































以上是关于Javascript鼠标键盘事件的主要内容,如果未能解决你的问题,请参考以下文章

DOM 基础事件(鼠标、键盘)

Javascript鼠标键盘事件

JavaScript中事件

javascript-事件冒泡鼠标跟随键盘跟随键盘提交

JavaScript键盘鼠标监听功能

JavaScript 模拟键盘事件和鼠标事件(比如模拟按下回车等)