JavaScript ::事件

2023-06-25 10:55:02 184

什么是事件？

JavaScript与HTML的交互是通过在用户或浏览器操纵页面时发生的事件来处理的。

页面加载时称为事件。当用户单击一个按钮时，该单击也是一个事件。其他示例包括事件，例如按任意键，关闭窗口，调整窗口大小等。

开发人员可以使用这些事件来执行JavaScript编码的响应，从而导致按钮关闭窗口，向用户显示消息，要验证的数据以及实际上可以想象的任何其他类型的响应。

事件是文档对象模型(DOM)级别3的一部分，每个HTML元素都包含一组可以触发JavaScript代码的事件。

onclick事件类型

这是用户单击鼠标左键时最常使用的事件类型。您可以针对此事件类型进行验证，警告等。

例子

请尝试以下示例。

Click the following button and see result

提交事件类型

onsubmit 是您尝试提交表单时发生的事件。您可以针对此事件类型进行表单验证。

例子

以下示例显示如何使用onsubmit。在这里，我们validate() 在将表单数据提交到Web服务器之前调用一个函数。如果 validate() function返回true，则将提交表单，否则将不提交数据。

请尝试以下示例。

鼠标悬停和鼠标悬停

这两种事件类型将帮助您用图像甚至文本创建漂亮的效果。该 的onmouseover 事件触发，当你把你的鼠标在任何元素和 的onmouseout 触发器，当你出从元件移动鼠标。尝试以下example.Live演示

Bring your mouse inside the division to see the result:

This is inside the division

HTML5标准事件

此处列出了标准HTML5事件供您参考。此处的脚本指示针对该事件要执行的Javascript函数。

属性价值描述Offline脚本Triggerswhenthedocumentgoesoffline奥纳博特脚本Triggersonanabortevent印后脚本Triggersafterthedocumentisprintedonbeforeonload脚本Triggersbeforethedocumentloads印前脚本TriggersbeforethedocumentisprintedOnblur脚本Triggerswhenthewindowlosesfocusoncanplay脚本Triggerswhenmediacanstartplay,butmighthastostopforbufferingoncanplaythrough脚本Triggerswhenmediacanbeplayedtotheend,withoutstoppingforbuffering不断变化脚本Triggerswhenanelementchanges点击脚本Triggersonamouseclick上下文菜单脚本Triggerswhenacontextmenuistriggeredondblclick脚本Triggersonamousedouble-click拖曳脚本Triggerswhenanelementisdragged昂德拉贡脚本Triggersattheendofadragoperation激进者脚本Triggerswhenanelementhasbeendraggedtoavaliddroptarget德拉格里夫脚本TriggerswhenanelementisbeingdraggedoveravaliddroptargetOndragover脚本Triggersatthestartofadragoperationondragstart脚本Triggersatthestartofadragoperation落下脚本Triggerswhendraggedelementisbeingdropped持续时间变化脚本Triggerswhenthelengthofthemediaischanged空着的脚本Triggerswhenamediaresourceelementsuddenlybecomesempty.顶着的脚本Triggerswhenmediahasreachtheend错误脚本Triggerswhenanerroroccur专注脚本Triggerswhenthewindowgetsfocus形式变更脚本Triggerswhenaformchangesonforminput脚本Triggerswhenaformgetsuserinput变迁脚本Triggerswhenthedocumenthaschange输入脚本Triggerswhenanelementgetsuserinput无效脚本Triggerswhenanelementisinvalid按键脚本Triggerswhenakeyispressed按键脚本Triggerswhenakeyispressedandreleased按键脚本Triggerswhenakeyisreleased负载脚本Triggerswhenthedocumentloads加载的数据脚本Triggerswhenmediadataisloaded加载的元数据脚本Triggerswhenthedurationandothermediadataofamediaelementisloadedonloadstart脚本Triggerswhenthebrowserstartstoloadthemediadata消息脚本Triggerswhenthemessageistriggered鼠标停下脚本Triggerswhenamousebuttonispressed情绪激动脚本Triggerswhenthemousepointermoves鼠标用完脚本Triggerswhenthemousepointermovesoutofanelement鼠标悬停脚本Triggerswhenthemousepointermovesoveranelement鼠标悬停脚本Triggerswhenamousebuttonisreleased鼠标轮脚本Triggerswhenthemousewheelisbeingrotated离线脚本Triggerswhenthedocumentgoesoffline蛋氨酸脚本Triggerswhenthedocumentcomesonline在线上脚本Triggerswhenthedocumentcomesonline页面隐藏脚本Triggerswhenthewindowishidden页面显示脚本Triggerswhenthewindowbecomesvisible暂停脚本Triggerswhenmediadataispaused进行中脚本Triggerswhenmediadataisgoingtostartplaying进行中脚本Triggerswhenmediadatahasstartplaying流行状态脚本Triggerswhenthewindow’shistorychanges进行中脚本Triggerswhenthebrowserisfetchingthemediadata利率变化脚本Triggerswhenthemediadata’splayingratehaschanged就绪状态变更脚本Triggerswhentheready-statechangesOnredo脚本Triggerswhenthedocumentperformsaredo调整大小脚本Triggerswhenthewindowisresized滚动脚本Triggerswhenanelement’sscrollbarisbeingscrolled寻求脚本Triggerswhenamediaelement’sseekingattributeisnolongertrue,andtheseekinghasended寻求脚本Triggerswhenamediaelement’sseekingattributeistrue,andtheseekinghasbegun选择脚本Triggerswhenanelementisselected已安装脚本Triggerswhenthereisanerrorinfetchingmediadata储存脚本Triggerswhenadocumentloads提交脚本Triggerswhenaformissubmitted暂停脚本Triggerswhenthebrowserhasbeenfetchingmediadata,butstoppedbeforetheentiremediafilewasfetchedontimeupdate脚本TriggerswhenmediachangesitsplayingpositionOnundo脚本Triggerswhenadocumentperformsanundoonunload脚本Triggerswhentheuserleavesthedocument音量变化脚本Triggerswhenmediachangesthevolume,alsowhenvolumeissetto“mute”等待中脚本在媒体停止播放但有望恢复播放时触发