脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js事件

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数组去重常用方法实例分析

    这篇文章主要介绍了javascript数组去重常用方法,结合实例形式对比分析了几种常用的数组去重方法实现技巧与优缺点,需要的朋友可以参考下
    2017-04-04
  • JavaScript输出当前时间Unix时间戳的方法

    JavaScript输出当前时间Unix时间戳的方法

    这篇文章主要介绍了JavaScript输出当前时间Unix时间戳的方法,涉及javascript中Date及getTime等函数操作时间的使用技巧,需要的朋友可以参考下
    2015-04-04
  • JavaScript下申明对象的几种方法小结

    JavaScript下申明对象的几种方法小结

    在JavaScript中可以用下面的几种方法申明对象:(从"Truly"的文章中学到)
    2008-10-10
  • js文件中直接alert()中文出来的是乱码的解决方法

    js文件中直接alert()中文出来的是乱码的解决方法

    下面小编就为大家带来一篇js文件中直接alert()中文出来的是乱码的解决方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-11-11
  • 谈谈impress.js初步理解

    谈谈impress.js初步理解

    impress.js 是国外一位开发者受 Prezi 启发，采用 CSS3 与 JavaScript 语言完成的一个可供开发者使用的表现层框架(演示工具)。感兴趣的朋友跟着小编一起学习吧
    2015-09-09
  • JS打开新窗口防止被浏览器阻止的方法

    JS打开新窗口防止被浏览器阻止的方法

    这篇文章主要介绍了JS打开新窗口防止被浏览器阻止的方法,分析对比了常用方法与改进方法,是非常实用的技巧,需要的朋友可以参考下
    2015-01-01
  • JavaScript Image对象实现原理实例解析

    JavaScript Image对象实现原理实例解析

    这篇文章主要介绍了JavaScript Image对象实现原理实例解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-08-08
  • js中字符型和数值型数字的互相转化方法(必看)

    js中字符型和数值型数字的互相转化方法(必看)

    下面小编就为大家带来一篇js中字符型和数值型数字的互相转化方法(必看)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-04-04
  • 详解Webpack如何引入CDN链接来优化编译后的体积

    详解Webpack如何引入CDN链接来优化编译后的体积

    这篇文章主要介绍了详解Webpack如何引入CDN链接来优化编译后的体积，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-06-06
  • 举例讲解JavaScript substring()的使用方法

    举例讲解JavaScript substring()的使用方法

    这篇文章主要通过举例的方法讲解了javaScript substring()的用法，substring() 方法用于提取字符串中介于两个指定下标之间的字符，感兴趣的小伙伴们可以参考一下
    2015-11-11

最新评论