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事件内容请搜索程序员之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持程序员之家！

您可能感兴趣的文章:

事件

Webpack中css-loader和less-loader的使用教程
这篇文章主要介绍了关于Webpack中css-loader和less-loader的使用教程，文中通过示例代码介绍的非常详细，相信对大家具有一定的参考价值，需要的朋友们下面来一起看看吧。
2017-04-04
JS 去前后空格大全(IE9亲测)
本文为大家详细介绍下JS去前后空格及所有空格，代码在IE9环境下测试，感兴趣的朋友可以参考下哈，希望对大家有所帮助
2013-07-07
Ionic 2 实现列表滑动删除按钮的方法
这篇教程将展示如何使用Ionic2添加一个简单的删除按钮到列表，当用户滑动列表项到左边的时候。这是一个处理删除列表数据时候常用的模式，具体内容大家通过本文学习吧
2017-01-01
iframe与主框架跨域相互访问实现方法
今天正好需要用到iframe 与主框架相互访问的实现方法，正好看到了这篇文章，确实不错，特分享一下,需要的朋友可以参考下
2017-09-09
JavaScript实现同时调用多个函数的方法
这篇文章主要介绍了JavaScript实现同时调用多个函数的方法,以一个简单实例分析了JavaScript同时调用两个函数的实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-11-11
javascript实现可全选、反选及删除表格的方法
这篇文章主要介绍了javascript实现可全选、反选及删除表格的方法,实例展示了javascript针对表格全选、反选、删除、隔行变色、删除提示等常用技巧,非常具有实用价值,需要的朋友可以参考下
2015-05-05
微信小程序地图绘制线段并且测量(实例代码)
这篇文章主要介绍了微信小程序地图绘制线段并且测量,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
2020-01-01
Javascript获取background属性中url的值
Javascript获取CSS中属性值方法有很多，今天工作的时候遇到了一个问题是需要利用Javascript获取css中background-img属性url的值，通过查阅网站的资料找到了解决方法，现在将方法分享给大家，有需要的朋友们们可以参考借鉴，下面来一起看看吧。
2016-10-10
JavaScript中变量提升与函数提升经典实例分析
这篇文章主要介绍了JavaScript中变量提升与函数提升,结合实例形式分析了JavaScript中的变量提升与函数提升相关原理、使用方法及操作注意事项,需要的朋友可以参考下
2018-07-07
BOM系列第二篇之定时器requestAnimationFrame
这篇文章主要介绍了BOM系列第二篇之定时器requestAnimationFrame 的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
2016-08-08