温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

javascript中的事件分类

发布时间:2021-08-12 17:39:26 来源:亿速云 阅读:85 作者:chen 栏目:web开发

这篇文章主要介绍“javascript中的事件分类”,在日常操作中,相信很多人在javascript中的事件分类问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”javascript中的事件分类”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

窗口事件属性(Window Event Attributes)

::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

由窗口触发该事件 (适用于 <body> 标签):

onafterprint,在打印文档之后运行脚本

onbeforeprint,在文档打印之前运行脚本

onbeforeonload,在文档加载之前运行脚本

onblur,当窗口失去焦点时运行脚本

onerror,当错误发生时运行脚本

onfocus,当窗口获得焦点时运行脚本

onhaschange,当文档改变时运行脚本

onload,当文档加载时运行脚本

onmessage,当触发消息时运行脚本

onoffline,当文档离线时运行脚本

ononline,当文档上线时运行脚本

onpagehide,当窗口隐藏时运行脚本

onpageshow,当窗口可见时运行脚本

onpopstate,当窗口历史记录改变时运行脚本

onredo,当文档执行再执行操作(redo)时运行脚本

onresize,当调整窗口大小时运行脚本

onstorage,当 Web Storage 区域更新时(存储空间中的数据发生变化时)运行脚本

onundo,当文档执行撤销时运行脚本

onunload,当用户离开文档时运行脚本

:::::::::::::::::::::::::::::::::::::::::::

表单事件(Form Events)

:::::::::::::::::::::::::::::::::::::::::::

表单事件在HTML表单中触发 (适用于所有 HTML 元素, 但该HTML元素需在form表单内):

onblur,当元素失去焦点时运行脚本

onchange,当元素改变时运行脚本

oncontextmenu,当触发上下文菜单时运行脚本

onfocus,当元素获得焦点时运行脚本

onformchange,当表单改变时运行脚本

onforminput,当表单获得用户输入时运行脚本

oninput,当元素获得用户输入时运行脚本

oninvalid,当元素无效时运行脚本

onreset,当表单重置时运行脚本。HTML 5 不支持。

onselect,当选取元素时运行脚本

http://www.iis7.com/b/plc/

onsubmit,当提交表单时运行脚本

:::::::::::::::::::::::::::::::::::::::::::::::::::::::

键盘事件(Keyboard Events)

::::::::::::::::::::::::::::::::::::::::::::::::::::::

onkeydown,当按下按键时运行脚本

onkeypress,当按下并松开按键时运行脚本

onkeyup,当松开按键时运行脚本

:::::::::::::::::::::::::::::::::::::::::::::::::

鼠标事件(Mouse Events)

::::::::::::::::::::::::::::::::::::::::::::::::

通过鼠标触发事件, 类似用户的行为:

onclick,当单击鼠标时运行脚本

ondblclick,当双击鼠标时运行脚本

ondrag,当拖动元素时运行脚本

ondragend,当拖动操作结束时运行脚本

ondragenter,当元素被拖动至有效的拖放目标时运行脚本

ondragleave,当元素离开有效拖放目标时运行脚本

ondragover,当元素被拖动至有效拖放目标上方时运行脚本

ondragstart,当拖动操作开始时运行脚本

ondrop,当被拖动元素正在被拖放时运行脚本

onmousedown,当按下鼠标按钮时运行脚本

onmousemove,当鼠标指针移动时运行脚本

onmouseout,当鼠标指针移出元素时运行脚本

onmouseover,当鼠标指针移至元素之上时运行脚本

onmouseup,当松开鼠标按钮时运行脚本

onmousewheel,当转动鼠标滚轮时运行脚本

onscrollNew,当滚动元素的滚动条时运行脚本

:::::::::::::::::::::::::::::::::::::::::::::::::

多媒体事件(Media Events)

::::::::::::::::::::::::::::::::::::::::::::::::

通过视频(videos),图像(images)或者音频(audio) 触发该事件,多应用于HTML媒体元素比如 <audio>, <embed>, <img>, <object>, 和<video>):

onabort,当发生中止事件时运行脚本

oncanplay,当媒介能够开始播放但可能因缓冲而需要停止时运行脚本

oncanplaythrough,当媒介能够无需因缓冲而停止即可播放至结尾时运行脚本

ondurationchange,当媒介长度改变时运行脚本

onemptied,当媒介资源元素突然为空时(网络错误、加载错误等)运行脚本

onended,当媒介已抵达结尾时运行脚本

onerror,当在元素加载期间发生错误时运行脚本

onloadeddata,当加载媒介数据时运行脚本

onloadedmetadata,当媒介元素的持续时间以及其他媒介数据已加载时运行脚本

onloadstart,当浏览器开始加载媒介数据时运行脚本

onpause,当媒介数据暂停时运行脚本

onplay,当媒介数据将要开始播放时运行脚本

onplaying,当媒介数据已开始播放时运行脚本

onprogress,当浏览器正在取媒介数据时运行脚本

onratechange,当媒介数据的播放速率改变时运行脚本

onreadystatechange,当就绪状态(ready-state)改变时运行脚本

onseeked,当媒介元素的定位属性 [1] 不再为真且定位已结束时运行脚本

onseeking,当媒介元素的定位属性为真且定位已开始时运行脚本

onstalled,当取回媒介数据过程中(延迟)存在错误时运行脚本

onsuspend,当浏览器已在取媒介数据但在取回整个媒介文件之前停止时运行脚本

ontimeupdate,当媒介改变其播放位置时运行脚本

onvolumechange,当媒介改变音量亦或当音量被设置为静音时运行脚本

onwaiting,当媒介已停止播放但打算继续播放时运行脚本

::::::::::::::::

其他事件

::::::::::::::::

onshow,当 <menu> 元素在上下文显示时触发

ontoggle,当用户打开或关闭 <details> 元素时触发

::::::::::::::::::::::::::::::::::

HTML5 <canvas>(画布)

:::::::::::::::::::::::::::::::::

HTML5 <canvas> 标签用于绘制图像(通过脚本,通常是 JavaScript)。

不过,<canvas> 元素本身并没有绘制能力(它仅仅是图形的容器) - 您必须使用脚本来完成实际的绘图任务。

getContext() 方法可返回一个对象,该对象提供了用于在画布上绘图的方法和属性。

颜色、样式和阴影:

fillStyle,设置或返回用于填充绘画的颜色、渐变或模式。

strokeStyle,设置或返回用于笔触的颜色、渐变或模式。

shadowColor,设置或返回用于阴影的颜色。

shadowBlur,设置或返回用于阴影的模糊级别。

shadowOffsetX,设置或返回阴影与形状的水平距离。

shadowOffsetY,设置或返回阴影与形状的垂直距离。

createLinearGradient(),创建线性渐变(用在画布内容上)。

createPattern(),在指定的方向上重复指定的元素。

createRadialGradient(),创建放射状/环形的渐变(用在画布内容上)。

addColorStop(),规定渐变对象中的颜色和停止位置。

线条样式:

lineCap,设置或返回线条的结束端点样式。

lineJoin,设置或返回两条线相交时,所创建的拐角类型。

lineWidth,设置或返回当前的线条宽度。

miterLimit,设置或返回最大斜接长度。

矩形:

rect(),创建矩形。

fillRect(),绘制"被填充"的矩形。

strokeRect(),绘制矩形(无填充)。

clearRect(),在给定的矩形内清除指定的像素。

路径:

fill(),填充当前绘图(路径)。

stroke(),绘制已定义的路径。

beginPath(),起始一条路径,或重置当前路径。

moveTo(),把路径移动到画布中的指定点,不创建线条。

closePath(),创建从当前点回到起始点的路径。

lineTo(),添加一个新点,然后在画布中创建从该点到最后指定点的线条。

clip(),从原始画布剪切任意形状和尺寸的区域。

quadraticCurveTo(),创建二次贝塞尔曲线。

bezierCurveTo(),创建三次贝塞尔曲线。

arc(),创建弧/曲线(用于创建圆形或部分圆)。

arcTo(),创建两切线之间的弧/曲线。

isPointInPath(),如果指定的点位于当前路径中,则返回 true,否则返回 false。

转换:

scale(),缩放当前绘图至更大或更小。

rotate(),旋转当前绘图。

translate(),重新映射画布上的 (0,0) 位置。

transform(),替换绘图的当前转换矩阵。

setTransform(),将当前转换重置为单位矩阵。然后运行 transform()。

文本:

font,设置或返回文本内容的当前字体属性。

textAlign,设置或返回文本内容的当前对齐方式。

textBaseline,设置或返回在绘制文本时使用的当前文本基线。

fillText(),在画布上绘制"被填充的"文本。

strokeText(),在画布上绘制文本(无填充)。

measureText(),返回包含指定文本宽度的对象。

图像绘制:

drawImage(),向画布上绘制图像、画布或视频。

像素操作:

width,返回 ImageData 对象的宽度。

height,返回 ImageData 对象的高度。

data,返回一个对象,其包含指定的 ImageData 对象的图像数据。

createImageData(),创建新的、空白的 ImageData 对象。

getImageData(),返回 ImageData 对象,该对象为画布上指定的矩形复制像素数据。

putImageData(),把图像数据(从指定的 ImageData 对象)放回画布上。

合成:

globalAlpha,设置或返回绘图的当前 alpha 或透明值。

globalCompositeOperation,设置或返回新图像如何绘制到已有的图像上。

其他:

save(),保存当前环境的状态。

restore(),返回之前保存过的路径状态和属性。

createEvent(), 

getContext(), 

toDataURL(),

到此,关于“javascript中的事件分类”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注亿速云网站,小编会继续努力为大家带来更多实用的文章!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI