网站建设的审批,wordpress添加媒体失败,合肥科技职业学院网站建设与管理,效果图制作公司哪家好HTML 事件处理程序是通过 JavaScript 来捕获和响应不同的用户操作、系统事件或浏览器事件。下面是不同类型的事件及其说明和示例。
Window 事件
1. onresize
当浏览器窗口的大小发生变化时触发。
!DOCTYPE html
html langen
headm…HTML 事件处理程序是通过 JavaScript 来捕获和响应不同的用户操作、系统事件或浏览器事件。下面是不同类型的事件及其说明和示例。
Window 事件
1. onresize
当浏览器窗口的大小发生变化时触发。
!DOCTYPE html
html langen
headmeta charsetUTF-8titleonresize Example/titlescriptwindow.onresize function() {console.log(Window resized);};/script
/head
bodyh1Resize the window and check the console/h1
/body
/html2. onredo
触发 redo 操作时触发通常与 document.execCommand() 相关。
!-- Example with redo event --
button onclickdocument.execCommand(redo)Redo/button3. onundo
触发 undo 操作时触发。
!-- Example with undo event --
button onclickdocument.execCommand(undo)Undo/button4. onload
页面加载完成时触发。
!DOCTYPE html
html langen
headmeta charsetUTF-8titleonload Example/titlescriptwindow.onload function() {alert(Page is fully loaded);};/script
/head
bodyh1onload Example/h1
/body
/html5. onunload
页面即将卸载时触发。
scriptwindow.onunload function() {alert(You are leaving the page!);};
/script6. onbeforeunload
页面卸载前触发通常用于警告用户有未保存的工作。
scriptwindow.onbeforeunload function() {return Are you sure you want to leave?;};
/script7. onerror
当页面发生错误时触发。
scriptwindow.onerror function(message, source, lineno, colno, error) {console.error(Error occurred: ${message});};
/script8. onhaschange
当浏览器历史记录发生变化时触发。
scriptwindow.onhashchange function() {console.log(Hash changed: location.hash);};
/script9. onpopstate
浏览器历史记录状态更改时触发。
scriptwindow.onpopstate function(event) {console.log(State: event.state);};
/script10. onstorage
当发生 localStorage 或 sessionStorage 的修改时触发。
scriptwindow.onstorage function(event) {console.log(Storage changed: event.key event.newValue);};
/script11. onmessage
当接收到来自另一个窗口或 iframe 的消息时触发。
scriptwindow.onmessage function(event) {console.log(Message received: event.data);};
/script12. onpagehide
当页面隐藏时触发通常是离开页面或切换标签页时。
scriptwindow.onpagehide function() {console.log(Page is hidden);};
/script13. onpageshow
当页面显示时触发通常是通过页面加载或恢复时。
scriptwindow.onpageshow function() {console.log(Page is shown);};
/script14. ononline
当浏览器连接到网络时触发。
scriptwindow.ononline function() {console.log(You are online);};
/script15. onoffline
当浏览器断开网络连接时触发。
scriptwindow.onoffline function() {console.log(You are offline);};
/script16. onafterprint
页面打印完成后触发。
scriptwindow.onafterprint function() {console.log(Printing finished);};
/script17. onbeforeprint
页面打印之前触发。
scriptwindow.onbeforeprint function() {console.log(Before printing);};
/scriptForm 事件
1. oninput
输入字段的值发生变化时触发。
input typetext oninputconsole.log(Input changed!)2. onselect
用户选中输入字段的文本时触发。
input typetext onselectalert(Text selected)3. onchange
表单元素的值发生变化时触发。
select onchangealert(Selection changed)optionOption 1/optionoptionOption 2/option
/select4. onfocus
当表单元素获得焦点时触发。
input typetext onfocusconsole.log(Input focused)5. onblur
当表单元素失去焦点时触发。
input typetext onblurconsole.log(Input lost focus)6. onsubmit
表单提交时触发。
form onsubmitalert(Form submitted)input typesubmit valueSubmit
/form7. onreset
当表单重置时触发。
form onresetalert(Form reset)input typereset valueReset
/form8. onformchange
表单的任何内容发生变化时触发。
form onformchangeconsole.log(Form content changed)input typetext
/form9. onforminput
当表单内容输入时触发。
form onforminputconsole.log(Form input changed)input typetext
/form10. oninvalid
表单验证失败时触发。
input typeemail oninvalidalert(Invalid input)Keyboard 事件
1. onkeydown
键盘按下时触发。
input typetext onkeydownconsole.log(Key pressed)2. onkeypress
键盘按下并触发时此事件已被弃用推荐使用 onkeydown。
input typetext onkeypressconsole.log(Key pressed)3. onkeyup
键盘松开时触发。
input typetext onkeyupconsole.log(Key released)Mouse 事件
1. onclick
鼠标单击时触发。
button onclickalert(Button clicked)Click me/button2. ondblclick
鼠标双击时触发。
button ondblclickalert(Button double-clicked)Double click me/button3. oncontextmenu
鼠标右键点击时触发。
button oncontextmenualert(Right-clicked)Right-click me/button4. onscroll
当页面滚动时触发。
scriptwindow.onscroll function() {console.log(Scrolled);};
/script5. onmousewheel
当鼠标滚轮滚动时触发。
scriptwindow.onmousewheel function() {console.log(Mouse wheel scrolled);};
/script6. onmousedown
鼠标按下时触发。
button onmousedownalert(Mouse button pressed)Mouse down/button7. onmousemove
鼠标移动时触发。
scriptwindow.onmousemove function(event) {console.log(Mouse moved: ${event.clientX}, ${event.clientY});};
/script8. onmouseout
鼠标移出元素时触发。
button onmouseoutalert(Mouse out)Mouse out/button9. onmouseover
鼠标悬停在元素上时触发。
button onmouseoveralert(Mouse over)Mouse over/button10. onmouseup
鼠标释放时触发。
button onmouseupalert(Mouse button released)Mouse up/buttonDrag 事件
1. ondrag
当元素被拖动时触发。
div draggabletrue ondragalert(Element is being dragged)Drag me/div2. ondragend
拖动操作结束时触发。
div draggabletrue ondragendalert(Drag ended)Drag me/div3. ondragenter
拖动元素进入目标区域时触发。
div ondragenteralert(Dragged element entered target)Drop here/div4. ondragleave
拖动元素离开目标区域时触发。
div ondragleavealert(Dragged element left target)Drop here/div5. ondragover
当拖动元素在目标区域上方时触发。
div ondragoveralert(Element is over target)Drop here/div6. ondragstart
拖动开始时触发。
div draggabletrue ondragstartalert(Drag started)Drag me/div7. ondrop
当元素被放置到目标区域时触发。
div ondropalert(Element dropped)Drop here/divMedia 事件
1. onplay
当媒体播放时触发。
video onplayconsole.log(Video started playing) controlssource srcvideo.mp4 typevideo/mp4
/video2. onplaying
媒体开始播放时触发。
video onplayingconsole.log(Video is playing) controlssource srcvideo.mp4 typevideo/mp4
/video3. onpause
媒体暂停时触发。
video onpauseconsole.log(Video paused) controlssource srcvideo.mp4 typevideo/mp4
/video4. onprogress
媒体加载进度发生变化时触发。
video onprogressconsole.log(Progress made) controlssource srcvideo.mp4 typevideo/mp4
/video5. onerror
媒体加载或播放错误时触发。
video onerrorconsole.log(Error loading video) controlssource srcinvalid-video.mp4 typevideo/mp4
/video6. onabort
媒体加载被中止时触发。
video onabortconsole.log(Media loading aborted) controlssource srcvideo.mp4 typevideo/mp4
/video7. onwaiting
媒体等待数据时触发。
video onwaitingconsole.log(Waiting for media data) controlssource srcvideo.mp4 typevideo/mp4
/video8. oncanplay
媒体可以播放时触发。
video oncanplayconsole.log(Video can play) controlssource srcvideo.mp4 typevideo/mp4
/video9. oncanplaythrough
媒体可以播放完整时触发。
video oncanplaythroughconsole.log(Video can play through) controlssource srcvideo.mp4 typevideo/mp4
/video10. ondurationchange
媒体持续时间发生变化时触发。
video ondurationchangeconsole.log(Duration changed) controlssource srcvideo.mp4 typevideo/mp4
/video11. onemptied
媒体数据丢失时触发。
video onemptiedconsole.log(Media data emptied) controlssource srcvideo.mp4 typevideo/mp4
/video12. onended
媒体播放完毕时触发。
video onendedconsole.log(Video ended) controlssource srcvideo.mp4 typevideo/mp4
/video13. onloadeddata
当媒体数据加载时触发。
video onloadeddataconsole.log(Video data loaded) controlssource srcvideo.mp4 typevideo/mp4
/video14. onloadedmetadata
当媒体元数据加载时触发。
video onloadedmetadataconsole.log(Video metadata loaded) controlssource srcvideo.mp4 typevideo/mp4
/video15. onloadstart
媒体加载开始时触发。
video onloadstartconsole.log(Video loading started) controlssource srcvideo.mp4 typevideo/mp4
/video16. onratechange
播放速率发生变化时触发。
video onratechangeconsole.log(Rate changed) controlssource srcvideo.mp4 typevideo/mp4
/video17. onreadystatechange
读取媒体数据状态时触发。
video onreadystatechangeconsole.log(Ready state changed) controlssource srcvideo.mp4 typevideo/mp4
/video18. onseeked
媒体定位完成时触发。
video onseekedconsole.log(Seek completed) controlssource srcvideo.mp4 typevideo/mp4
/video19. onseeking
媒体定位时触发。
video onseekingconsole.log(Seeking media) controlssource srcvideo.mp4 typevideo/mp4
/video20. onstalled
媒体下载缓慢时触发。
video onstalledconsole.log(Stalled during download) controlssource srcvideo.mp4 typevideo/mp4
/video21. onsuspend
媒体暂停下载时触发。
video onsuspendconsole.log(Download suspended) controlssource srcvideo.mp4 typevideo/mp4
/video22. ontimeupdate
媒体时间更新时触发。
video ontimeupdateconsole.log(Time updated) controlssource srcvideo.mp4 typevideo/mp4
/video23. onvolumechange
媒体音量发生变化时触发。
video onvolumechangeconsole.log(Volume changed) controlssource srcvideo.mp4 typevideo/mp4
/video
