返回顶部
首页 > 资讯 > 前端开发 > html >javascript中的事件分类
  • 307
分享到

javascript中的事件分类

2024-04-02 19:04:59 307人浏览 八月长安
摘要

这篇文章主要介绍“javascript中的事件分类”,在日常操作中,相信很多人在javascript中的事件分类问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”javascri

这篇文章主要介绍“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中的事件分类”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注编程网网站,小编会继续努力为大家带来更多实用的文章!

--结束END--

本文标题: javascript中的事件分类

本文链接: https://lsjlt.com/news/78332.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • javascript中的事件分类
    这篇文章主要介绍“javascript中的事件分类”,在日常操作中,相信很多人在javascript中的事件分类问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”javascri...
    99+
    2024-04-02
  • javascript中的事件有哪些类型
    javascript中的事件有哪些类型?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。javascript有:1、UI事件;2、焦点事件;3、鼠标与滚轮事件;4、键盘与文本事...
    99+
    2023-06-15
  • JavaScript中DOM事件的示例分析
    这篇文章主要介绍了JavaScript中DOM事件的示例分析,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。1、事件对象【获取事件对象】什么是事件对象:是个对象,这个对象里有事...
    99+
    2023-06-29
  • javascript中事件监听与事件委托的示例分析
    这篇文章主要介绍了javascript中事件监听与事件委托的示例分析,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。事件监听与事件委托在js中...
    99+
    2024-04-02
  • JavaScript中事件机制的示例分析
    这篇文章主要介绍JavaScript中事件机制的示例分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!事件是将JavaScript脚本与网页联系在一起的主要方式,是JavaScrip...
    99+
    2024-04-02
  • JavaScript中事件冒泡的示例分析
    这篇文章主要介绍JavaScript中事件冒泡的示例分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!什么是事件冒泡?事件冒泡刚好与事件捕获相反,当前元素---->body -...
    99+
    2024-04-02
  • JavaScript中事件捕获的示例分析
    这篇文章主要介绍JavaScript中事件捕获的示例分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!什么是事件捕获?当事件发生在 DOM 元素上时,该事件并不完全发生在那个元素上。...
    99+
    2024-04-02
  • javascript事件的示例分析
    这篇文章将为大家详细讲解有关javascript事件的示例分析,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。本文实例为大家分享了js事件的传播,供大家参考,具体内容如下&...
    99+
    2024-04-02
  • JavaScript事件类型的简单介绍
    这篇文章主要讲解了“JavaScript事件类型的简单介绍”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“JavaScript事件类型的简单介绍”吧!DOM事...
    99+
    2024-04-02
  • JavaScript事件流的示例分析
    这篇文章主要介绍JavaScript事件流的示例分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!1.什么是事件流 ?在学习事件流之前我们先看看什么是事件 ?事件代表文档或浏览器窗口中某个有意义的时刻即用户与页面的交...
    99+
    2023-06-29
  • javascript中事件执行机制的示例分析
    小编给大家分享一下javascript中事件执行机制的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!先看一段代码各位小伙...
    99+
    2024-04-02
  • javascript都有哪些事件类型
    本篇内容介绍了“javascript都有哪些事件类型”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成! ...
    99+
    2024-04-02
  • JavaScript事件类型怎么使用
    本篇内容介绍了“JavaScript事件类型怎么使用”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!在Jav...
    99+
    2024-04-02
  • javascript滚轮事件的示例分析
    小编给大家分享一下javascript滚轮事件的示例分析,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!具体内容如下<html>    <he...
    99+
    2024-04-02
  • Javascript事件对象的示例分析
    小编给大家分享一下Javascript事件对象的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!如果是事件处理函数绑定的函...
    99+
    2024-04-02
  • JavaScript事件方法的示例分析
    这篇文章主要介绍了JavaScript事件方法的示例分析,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。上代码<!DOCTYPE&nbs...
    99+
    2024-04-02
  • JavaScript的事件监听实例分析
    这篇文章主要介绍了JavaScript的事件监听实例分析的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇JavaScript的事件监听实例分析文章都会有所收获,下面我们一起来看看吧。1.什么是事件监听 ?事件监听...
    99+
    2023-06-29
  • javascript事件查询的示例分析
    这篇文章主要为大家展示了“javascript事件查询的示例分析”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“javascript事件查询的示例分析”这篇文章吧。click()   对...
    99+
    2023-06-03
  • javascript中的事件有哪些
    javascript中的事件有哪些?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。javascript事件有:1、onLoad当页面加载完毕后触发,常用于body元素;2、onU...
    99+
    2023-06-14
  • JavaScript中事件与异常捕获的示例分析
    小编给大家分享一下JavaScript中事件与异常捕获的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!事件处理【onCl...
    99+
    2024-04-02
软考高级职称资格查询
推荐阅读
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作