js 三大事件（鼠标.键盘.浏览器）

最新推荐文章于 2024-09-10 13:23:11 发布

weixin_30576859

最新推荐文章于 2024-09-10 13:23:11 发布

阅读量253

点赞数

原文链接：http://www.cnblogs.com/wanguofeng/p/10622938.html

版权

鼠标事件：

　　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>

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：按键按下抬起

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

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

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>

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("滚动");
    }