第十三周学习总结
时间:2019-11-23
本文章向大家介绍第十三周学习总结,主要包括第十三周学习总结使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
鼠标事件指与鼠标相关的事件,继承了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属性返回垂直坐标。这两个属性都是只读属性。
原文地址:https://www.cnblogs.com/freezinng/p/11918857.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Ubuntu虚拟机下使用cutecom进行串口通信的方法
- 虚拟机Linux系统忘记密码修改root或其他用户密码的方法
- 在 RHEL8 /CentOS8 上建立多节点 Elastic stack 集群的方法
- linux 搭建svn服务器的方法步骤
- linux 下隐藏进程的一种方法及遇到的坑
- Ubuntu 18.04中截图工具shutter的编辑按钮不可用的解决办法
- Linux服务器利用防火墙iptables策略进行端口跳转的方法
- Linux下PHP网站服务器安全配置加固防护方法【推荐】
- CentOS8 yum/dnf 配置国内源的方法
- 浅析在 RHEL8 配置静态 IP 地址的不同方法
- ubuntu16.04自动设置行号的步骤详解
- CentOS 8安装ZABBIX4.4的指南
- Linux 3.X/4.x/5.x 忘记宝塔面板密码的解决方法
- Linux中grep和egrep命令详解
- centos8 使用yum 安装 mongodb 4.2的方法