• 第十三周学习总结


    鼠标事件指与鼠标相关的事件,继承了MouseEvent接口。具体的事件主要有以下一些。

    click:按下鼠标(通常是按下主按钮)时触发。
    dblclick:在同一个元素上双击鼠标时触发。
    mousedown:按下鼠标键时触发。
    mouseup:释放按下的鼠标键时触发。
    mousemove:当鼠标在一个节点内部移动时触发。当鼠标持续移动时,该事件会连续触发。为了避免性能问题,建议对该事件的监听函数做一些限定,比如限定一段时间内只能运行一次。
    mouseenter:鼠标进入一个节点时触发,进入子节点不会触发这个事件(详见后文)。
    mouseover:鼠标进入一个节点时触发,进入子节点会再一次触发这个事件(详见后文)。
    mouseout:鼠标离开一个节点时触发,离开父节点也会触发这个事件(详见后文)。
    mouseleave:鼠标离开一个节点时触发,离开父节点不会触发这个事件(详见后文)。
    contextmenu:按下鼠标右键时(上下文菜单出现前)触发,或者按下“上下文菜单键”时触发。
    wheel:滚动鼠标的滚轮时触发,该事件继承的是WheelEvent接口。
    
    • click事件指的是,用户在同一个位置先完成mousedown动作,再完成mouseup动作。因此,触发顺序是,mousedown首先触发,mouseup接着触发,click最后触发。

    • dblclick事件则会在mousedown、mouseup、click之后触发。

    • mouseover事件和mouseenter事件,都是鼠标进入一个节点时触发。两者的区别是,mouseenter事件只触发一次,而只要鼠标在节点内部移动,mouseover事件会在子节点上触发多次。

    MouseEvent 接口概述

    • MouseEvent接口代表了鼠标相关的事件,单击(click)、双击(dblclick)、松开鼠标键(mouseup)、按下鼠标键(mousedown)等动作,所产生的事件对象都是MouseEvent实例。此外,滚轮事件和拖拉事件也是MouseEvent实例。

    • MouseEvent接口继承了Event接口,所以拥有Event的所有属性和方法。它还有自己的属性和方法。

    • 浏览器原生提供一个MouseEvent构造函数,用于新建一个MouseEvent实例。

    varevent = newMouseEvent(type, options);
    
    • MouseEvent构造函数接受两个参数。第一个参数是字符串,表示事件名称;第二个参数是一个事件配置对象,该参数可选。除了Event接口的实例配置属性,该对象可以配置以下属性,所有属性都是可选的。
    screenX:数值,鼠标相对于屏幕的水平位置(单位像素),默认值为0,设置该属性不会移动鼠标。
    screenY:数值,鼠标相对于屏幕的垂直位置(单位像素),其他与screenX相同。
    clientX:数值,鼠标相对于程序窗口的水平位置(单位像素),默认值为0,设置该属性不会移动鼠标。
    clientY:数值,鼠标相对于程序窗口的垂直位置(单位像素),其他与clientX相同。
    ctrlKey:布尔值,是否同时按下了 Ctrl 键,默认值为false。
    shiftKey:布尔值,是否同时按下了 Shift 键,默认值为false。
    altKey:布尔值,是否同时按下 Alt 键,默认值为false。
    metaKey:布尔值,是否同时按下 Meta 键,默认值为false。
    button:数值,表示按下了哪一个鼠标按键,默认值为0,表示按下主键(通常是鼠标的左键)或者当前事件没有定义这个属性;1表示按下辅助键(通常是鼠标的中间键),2表示按下次要键(通常是鼠标的右键)。
    buttons:数值,表示按下了鼠标的哪些键,是一个三个比特位的二进制值,默认为0(没有按下任何键)。1(二进制001)表示按下主键(通常是左键),2(二进制010)表示按下次要键(通常是右键),4(二进制100)表示按下辅助键(通常是中间键)。因此,如果返回3(二进制011)就表示同时按下了左键和右键。
    relatedTarget:节点对象,表示事件的相关节点,默认为null。mouseenter和mouseover事件时,表示鼠标刚刚离开的那个元素节点;mouseout和mouseleave事件时,表示鼠标正在进入的那个元素节点。
    

    MouseEvent 接口的实例属性

    • MouseEvent.altKey,MouseEvent.ctrlKey,MouseEvent.metaKey,MouseEvent.shiftKey

    • MouseEvent.altKey、MouseEvent.ctrlKey、MouseEvent.metaKey、MouseEvent.shiftKey这四个属性都返回一个布尔值,表示事件发生时,是否按下对应的键。它们都是只读属性。

    altKey属性:Alt 键
    ctrlKey属性:Ctrl 键
    metaKey属性:Meta 键(Mac 键盘是一个四瓣的小花,Windows 键盘是 Windows 键)
    shiftKey属性:Shift 键
    

    MouseEvent.button,MouseEvent.buttons

    • MouseEvent.button属性返回一个数值,表示事件发生时按下了鼠标的哪个键。该属性只读。
    0:按下主键(通常是左键),或者该事件没有初始化这个属性(比如mousemove事件)。
    1:按下辅助键(通常是中键或者滚轮键)。
    2:按下次键(通常是右键)。
    

    MouseEvent.clientX,MouseEvent.clientY

    • MouseEvent.clientX属性返回鼠标位置相对于浏览器窗口左上角的水平坐标(单位像素),MouseEvent.clientY属性返回垂直坐标。这两个属性都是只读属性。
  • 相关阅读:
    day7 面向对象 静态方法 类方法 属性方法 类的特殊成员方法 元类 反射 异常处理
    day6 面向对象 封装 继承 多态 类与实例在内存中的关系 经典类和新式类
    day5 time datetime random os sys shutil json pickle shelve xml configparser hashlib subprocess logging re正则 python计算器
    kafka常用操作命令
    linux基础
    django学习1——初识web应用程序
    mysql数据库(三)——pymysql模块
    mysql数据库(二)——表的查询
    mysql数据库(一)
    Python常用模块——re模块
  • 原文地址:https://www.cnblogs.com/freezinng/p/11918857.html
Copyright © 2020-2023  润新知