Js-三大事件（鼠标事件、键盘事件、html事件）

最新推荐文章于 2022-07-26 11:40:22 发布

紫金文曲星

最新推荐文章于 2022-07-26 11:40:22 发布

阅读量1.4k

点赞数

分类专栏： js 文章标签： js 鼠标移动键盘监听 html事件

原文链接：https://blog.csdn.net/qwer_df_b/article/details/77509859

版权

js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

原文出处：https://blog.csdn.net/qwer_df_b/article/details/77509859

鼠标事件

click：单击

dblclick：双击

mousedown：鼠标按下

mouseup：鼠标抬起

mouseover：鼠标悬浮

mouseout：鼠标离开

mousemove：鼠标移动

mouseenter：鼠标进入

mouseleave：鼠标离开

<button οnclick="myClick()">鼠标单击</button>
<button οndblclick="myDBClick()">鼠标双击</button>
<button οnmοusedοwn="myMouseDown()" οnmοuseup="myMouseUp()">鼠标按下和抬起</button>
<button οnmοuseοver="myMouseOver()" οnmοuseοut="myMouseOut()">鼠标悬浮和离开</button>
<button οnmοusemοve="myMouseMove()">鼠标移动</button>
<button οnmοuseenter="myMouseEnter()" οnmοuseleave="myMouseLeave()">鼠标进入和离开</button>

键盘事件

keydown：按键按下

keyup：按键抬起

keypress：按键按下抬起

<body>
<input id="name" type="text" οnkeydοwn="myKeyDown(this.id)" οnkeyup="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 οnlοad="loaded()">
<div style="height: 3000px" ></div>
<input type="text" id="name" οnselect="mySelect(this.id)">
<input type="text" id="name2" οnchange="myChange(this.id)">
<input type="text" id="name3" οnfοcus="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>

紫金文曲星

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Js-三大事件（鼠标事件、键盘事件、html事件）

原文出处：https://blog.csdn.net/qwer_df_b/article/details/77509859鼠标事件click：单击dblclick：双击mousedown：鼠标按下mouseup：鼠标抬起mouseover：鼠标悬浮mouseout：鼠标离开mousemove：鼠标移动mouseenter：鼠标进入mouseleave：鼠标离...
复制链接

扫一扫