• 【JavaScript】鼠标、键盘的基础事件

    鼠标键盘的基础事件：

    鼠标事件事件类型
    点击左键click
    鼠标经过mouseover
    鼠标离开mouseout
    获得鼠标焦点focus
    失去鼠标焦点blur
    鼠标移动mousemove
    鼠标弹起mouseup
    鼠标按下mousedown
    鼠标选中selectstart
    键盘事件
    keyup某键松开
    keydown某键按下
    keypress某键按下（不识别功能键）区分大小写

    绑定事件首先得有事件源，即获取到指定元素，可以参考我之前的博客。

    【JavaScript】获取网页元素_折途的博客-CSDN博客分别获取body和html,全局仅有一个,比较特殊.格式固定,元素名可以自己另外起。https://blog.csdn.net/m0_63235356/article/details/126556194?spm=1001.2014.3001.5501

     方法一：

    注册事件:

    1. 事件源.事件类型=function(){
    2.     具体执行内容
    3. }

    其中事件源就是元素对象,事件类型就是上面列举的,但是使用方法一,则必须在事件类型前加上'on'.

    删除事件:

    事件源.事件类型=null

    例:(以下是截取了部分示例,关于事件的完整示例我会在下面放上源码)

    1. var father=document.querySelector('.father')
    2. father.onclick=function () {
    3.         console.log('father')
    4.     }
    5. father.onclick=null

    方法二(推荐):

    注册事件:

    1. 事件源.addEventListener('事件类型',function (){
    2.     具体执行内容
    3. },选择执行顺序)

    这里的事件类型不需要加'on'.

    执行顺序若为'true'则为捕获执行顺序,为'false'则为冒泡执行顺序.

    捕获执行顺序是从大到小依次执行,冒泡执行顺序是从小到大依次执行.

    例如:

    捕获执行顺序元素冒泡执行顺序
    ↓document
    ↓html↑
    ↓body↑
    ↓父元素↑
    子元素↑

    若子元素与父元素都有注册点击事件,那么若是冒泡执行顺序,点击了子元素,会触发子元素的事件,并且会按照顺序连同父元素的点击事件一起触发.若是捕获执行顺序,点击了父元素,会在触发父元素事件后触发子元素事件.

    完整例:

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6.     <style>
    7.         *{
    8.             padding: 0;
    9.             margin: 0;
    10.         }
    11.         .father{
    12.             width: 500px;
    13.             height: 500px;
    14.             background-color: beige;
    15.         }
    16.         .son{
    17.             width: 400px;
    18.             height: 400px;
    19.             background-color: gray;
    20.         }
    21.         .grandson{
    22.             width: 300px;
    23.             height: 300px;
    24.             background-color: #e74c3c;
    25.         }
    26.         .input{
    27.             width: 100px;
    28.             height: 30px;
    29.         }
    30.     style>
    31. head>
    32. <body>
    33. <div class="father">
    35.     <div class="son">
    36.         <div class="grandson">div>
    37.     div>
    38. div>
    39. <script>
    40.     var father=document.querySelector('.father')
    41.     var son=document.querySelector('.son')
    42.     var grandson=document.querySelector('.grandson')
    43.     father.addEventListener('click',function () {
    44.         console.log('father')
    45.     },true)
    46.     son.addEventListener('click',function () {
    47.         console.log('son')
    48.     },true)
    49.     grandson.addEventListener('click',function () {
    50.         console.log('grandson')
    51.     },true)
    52. script>
    53. body>
    54. html>

    删除事件:

     若要删除一个事件,那么必须要给删除的事件的执行函数起名(其他情况下可以不起名毕竟敲代码最困难的就是起名字)

    事件源.removeEventListener('事件类型',执行函数的函数名,选择执行顺序)

    键盘事件:

    执行键盘事件,则需要在执行函数中加上一个形参,名字可以随便起,它代表的是事件对象.以下以e为例.

    1. 一个输入框元素.addEventListener('keydown',function(e){
    2.     console.log(e.key)
    3. })

    e.key可以直接获取按下的按键是什么.

    e.keyCode可以获取相应按键的ASCII值.

    可以利用判断语句来设置特定按键执行特定功能.

    1. 一个输入框元素.addEventListener('keydown',function(e){
    2.     if(e.key=='a'){
    3.         console.log(e.key)
    4.     }
    5. })

     手动调用事件:

    非常简单粗暴,直接

    事件源.事件类型()

     这样就代表了某元素被点击了.

    某元素.click()

  • 相关阅读:
    【C++】不用include,使用C++模块语法实现函数调用
    Bug排查思路
    linux文件目录管理
    【微信小程序开发】宠物预约医疗项目实战-登录实现
    Jackson多态序列化
    使用canal实现数据实时同步
    DateTime 相关的操作汇总【C# 基础】
    【虚幻引擎UE】UE5 C++环境异常原因及解决方案
    VUE之proxy配置实现跨域
    插入排序算法
  • 原文地址：https://blog.csdn.net/m0_63235356/article/details/126619537