JavaScript中常见的事件用法小结

更新时间：2023年05月16日 00:17:22 作者：码仙

这篇文章主要介绍了JavaScript中常见的事件用法小结,需要的朋友可以参考下

一.onclick() 鼠标左键单击事件

案例：点击按钮弹框

<body>
<input type="button" value="按钮" id="btn">
<script>
    document.getElementById("btn").onclick = function () {
        alert("点击了");
    };
</script>
</body>

二.onmouseover 鼠标进入事件与onmouseout鼠标离开事件

案例：鼠标进入红色，离开蓝色（放上去就可以，不用点击）

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: aqua;
        }
    </style>
</head>
<body>
<div id="dv"></div>
<script>
    document.getElementById("dv").onmouseover = function () {
        document.getElementById("dv").style.backgroundColor = "red";
    };
    document.getElementById("dv").onmouseout = function () {
        document.getElementById("dv").style.backgroundColor = "";
    };
</script>
</body>

三.onfocus 获取焦点事件与onblur 失去焦点事件

案例：文本框

<body>
<input type="text" value="请输入内容" id="te">
<script>
    document.getElementById("te").onfocus = function () {
        document.getElementById("te").value = "";
    };
    document.getElementById("te").onblur = function () {
        document.getElementById("te").value = "请输入内容";
    };
</script>
</body>

四.onmousemove 鼠标移动事件

鼠标移动的时候就会触发

案例：div 跟着鼠标移动

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 50px;
            height: 50px;
            background-color: pink;
            position: absolute;
        }
    </style>
</head>
<body>
<div id="dv"></div>
<script>
    document.onmousemove = function (e) {
        //鼠标相对于页面的可视区域的横坐标
        var x = e.clientX;
        //鼠标相对于页面的可视区域的纵坐标
        var y = e.clientY;
        //div对象
        var dvobj = document.getElementById("dv");
        //设置div的横坐标
        dvobj.style.left = x + "px";
        //设置div的纵坐标
        dvobj.style.top = y + "px";
    };
</script>
</body>

五.onscroll 滚动条滚动事件

当拖动滚动条的时候就会触发

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            overflow: auto;
        }
    </style>
</head>
<body>
<div id="dv">
    码仙码仙码仙码仙码仙码仙码仙码仙码仙码仙码仙码仙码仙码仙码仙
</div>
<script>
    document.getElementById("dv").onscroll = function () {
        console.log("滚动条被拖动了");
    };
</script>
</body>

六. onkeydown / onkeyup 键盘按下/抬起事件

当键盘按下或者抬起任意按键的时候触发

<body>
<input type="text" id="txt">
<script>
    document.getElementById("txt").onkeydown = function () {
        console.log("键盘按下了");
    };
    document.getElementById("txt").onkeyup = function () {
        console.log("键盘抬起了");
    };
</script>
</body>

七.keyCode 获取按下的是哪个按键

<script>
    //页面的任何的位置.按下键盘,获取按键的值
    document.onkeydown = function (e) {
        //console.log(e.keyCode);//事件参数对象
        switch (e.keyCode) {
            case 81:
                console.log("您按下的是Q");
                break;
            case 87:
                console.log("您按下的是W");
                break;
            case 69:
                console.log("您按下的是E");
                break;
            case 82:
                console.log("您按下的是R");
                break;
        }
    };
</script>

八. onmousedown / onmouseup 鼠标按下/抬起事件

当鼠标左键或右键按下或者抬起的时候触发

按下或抬起滚动轮也会触发，滑动滚动轮不能触发

如果鼠标比较高级，有其他按键的情况下，按下或抬起也会触发

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 50px;
            height: 50px;
            background-color: pink;
        }
    </style>
</head>
<body>
<div id="dv"></div>
<script>
    document.getElementById("dv").onmousedown = function () {
        console.log("鼠标按下了");
    };
    document.getElementById("dv").onmouseup = function () {
        console.log("鼠标抬起了");
    };
</script>
</body>

本篇博客来自于传智播客视频教程的总结以及笔记的整理，仅供学习交流，切勿用于商业用途

到此这篇关于JavaScript中常见的事件用法小结的文章就介绍到这了,更多相关js事件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

事件

不错的Javascript表格翻页效果
不错的Javascript表格翻页效果...
2007-08-08
删除条目时弹出的确认对话框
这篇文章主要介绍用js的confirm实现的删除条目时弹出的确认对话框，询问是否要删除这条记录,需要的朋友可以参考下
2014-06-06
JS+CSS实现炫酷光感效果
这篇文章主要为大家详细介绍了JS+CSS实现炫酷光感效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-09-09
js获取多个tagname的节点数组
写了个获取多个tagname节点集合的小方法。类似于jQuery的$(‘iput,select,textarea’,'#form’)的效果，返回是按节点在原有文档流中的顺序返回的
2013-09-09
JavaScript实现简易加法计算器
这篇文章主要介绍了JavaScript实现简易加法计算器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-03-03
alert和confirm功能介绍
这篇文章主要为大家介绍了alert和confirm的功能,需要的朋友可以参考下
2014-05-05
微信小程序学习笔记之获取位置信息操作图文详解
这篇文章主要介绍了微信小程序学习笔记之获取位置信息操作,结合实例形式分析了微信小程序获取位置信息的原理、步骤及相关操作注意事项,并结合图文形式予以说明,需要的朋友可以参考下
2019-03-03
Knockoutjs的环境搭建教程
最近要在项目中使用Knockoutjs，因此今天就首先研究了一下Knockoutjs的环境搭建，并进行了一个简单的测试,需要的朋友可以了解下
2012-11-11
JS中简单的实现像C#中using功能（有源码下载）
JS中简单的实现像C#中using功能（有源码下载）...
2007-01-01
JavaScript初学者容易犯的几个错误
JavaScript 是对初学者比较友好的一门编程语言，基本上花个半小时看下语法就能写出能运行的代码。JavaScript 是动态脚本语言，对数据类型没有太多的限制，写起来非常灵活。但正因为如此，初学者如果不深入了解语言本身，往往会犯一些错误，从而导致一些很难发现的 bug。
2021-05-05