有关JavaScript用到的HTMLDOM事件,需要的快上车!!!

大家好,我是初入前端的一名菜鸟,我叫李不白。

那么这一期内容呢,整理一下有关JavaScript用到的DOM事件,昨天我已经将部分,整理到我的笔记本上了,方便随时翻阅,等以后经常用的时候,就会记住不需要笔记了。

老师说我,都什么年代了,还用纸去记,用专业的笔记软件啊!emmmm,刚接触这行还不习惯,然后还在学习中,自己暂时还是习惯用笔,记录在纸上,感觉能帮助记忆一样。好了废话不多说,上干货。

htmlDOM 事件允许Javascript在html文档元素中注册不同事件处理程序。事件通常与函数结合使用,函数不会在事件发生前被执行! (如用户点击按钮)。

那么如何写这一串代码呢?

let libubai=documentElementById(libubai);

libubia.onclick=function( ){ }

以上这两行代码呢,第一行是声明一个变量值,抓取一个元素。第二行则是给这个元素一个点击事件,onclick意思是鼠标点击事件,当鼠标点击这个元素,发生点击事件的时候,那么发生的事是什么?就需要写到中括号里,改变元素宽高,或者改改颜色等等。

而像这类的事件有很多,下面开始上正文。

一,鼠标事件。

1,onclick:当用户点击某个对象时调用的事件句柄。

2,oncontextmenu:在用户点击鼠标右键打开上下文菜单时触发。

3,ondblclick:当用户双击某个对象时调用的事件句柄。

4,onmousedown:鼠标按钮被按下。

5,onmouseenter:鼠标移进元素时触发。

6,onmouseleave:鼠标移出元素时触发。

7,onmousemove:鼠标被移动。

8,onmouseover:鼠标移动到某元素之上。

9,onmouseout:鼠标从某元素移开。

10,onmouseup:鼠标按键被松开。

二、键盘事件。

1,onkeydown:某个键盘按键被按下。

2,onkeypress:按键被按下再松开。

3,onkeyup:按键被松开。

三、框架/对象事件。(这部分暂时还没接触,既然看到了,就一起发出来,自己也先记下来,等老师讲的时候,就熟悉了。)

1,onabort:图像的加载被中断。( <object>)。

2,onbeforeunload:该事件在即将离开页面(刷新或关闭)时触发。

3, onerror:在加载文档或图像时发生错误。 ( <object>, <body>和 <frameset>)。

4,onhashchange:该事件在当前 URL 的锚部分发生修改时触发。

5,onload:一张页面或一幅图像完成加载。

6,onpageshow:该事件在用户访问页面时触发。

7,onpagehide:该事件为用户离开当前网页跳转到另一个页面时触发。

8,onresize:窗口或框架被重新调整大小。

9,onscroll:当文档被滚动时发生的事件。

10,onunload:用户退出页面。 ( <body> 和 <frameset>)。

四、表单事件。

1,onblur:元素失去焦点时触发。

2,onchange:该事件在表单元素的内容改变时触发( <input>, <keygen>, <select>, 和 <textarea>)。

3,oufocus:元素获取焦点时触发。

4,onfoucsin:元素即将获取焦点时触发。

5,onfoucsout:元素即将失去焦点是触发。

6,oninput:元素获取用户输入时触发。

7,onreset:表当重置时触发。

8,onsearch:用户向搜索域输入文本时触发 ( <input="search">)。

9,onselect:用户选取文本时触发 ( <input> 和 <textarea>)。

10,onsubmit:表单提交时触发。

五、剪贴板事件。

1,oncopy:该事件在用户拷贝元素内容时触发。

2,oncut:该事件在用户剪切元素内容时触发。

3,onpaste:该事件在用户粘贴元素内容时触发。

六,打印事件。

1,onafterprint:该事件在页面已经开始打印,或者打印窗口已经关闭时触发。

2,onbeforeprint:该事件在页面即将开始打印时触发。

七、拖动事件。

1,ondrag:该事件在元素正在拖动时触发。

2,ondragend:该事件在用户完成元素的拖动时触发。

3,ondragenter:该事件在拖动的元素进入放置目标时触发。

4,ondragleave:该事件在拖动元素离开放置目标时触发。

5,ondragover:该事件在拖动元素在放置目标上时触发。

6,ondragstart:该事件在用户开始拖动元素时触发。

7,ondrop:该事件在拖动元素放置在目标区域时触发。

八、多媒体事件。

1,onabort:事件在视频/音频(audio/video)终止加载时触发。

2,oncanplay:事件在用户可以开始播放视频/音频(audio/video)时触发。

3,oncanplaythrough:事件在视频/音频(audio/video)可以正常播放且无需停顿和缓冲时触发。

4,ondurationchange:事件在视频/音频(audio/video)的时长发生变化时触发。

5, onemptied:当期播放列表为空时触发。

6,onended:事件在视频/音频(audio/video)播放结束时触发。

7,onerror:事件在视频/音频(audio/video)数据加载期间发生错误时触发。

8,onloadeddata:事件在浏览器加载视频/音频(audio/video)当前帧时触发触发。

9,onloadedmetadata:事件在指定视频/音频(audio/video)的元数据加载后触发。

10,onloadstart:事件在浏览器开始寻找指定视频/音频(audio/video)触发。

11,onpause:事件在视频/音频(audio/video)暂停时触发。

12,onplay:事件在视频/音频(audio/video)开始播放时触发。

13,onplaying:事件在视频/音频(audio/video)暂停或者在缓冲后准备重新开始播放时触发。

14,onprogress:事件在浏览器下载指定的视频/音频(audio/video)时触发。

15,onratechange:事件在视频/音频(audio/video)的播放速度发送改变时触发。

16,onseeked:事件在用户重新定位视频/音频(audio/video)的播放位置后触发。

17,onseeking:事件在用户开始重新定位视频/音频(audio/video)时触发。

18,onstalled:事件在浏览器获取媒体数据,但媒体数据不可用时触发。

19,onsuspend:事件在浏览器读取媒体数据中止时触发。

20,ontimeupdate:事件在当前的播放位置发送改变时触发。

21,onvolumechange:事件在音量发生改变时触发。

22,onwaiting:事件在视频由于要播放下一帧而需要缓冲时触发。

九、动画事件。

1,animationend:该事件在 CSS 动画结束播放时触发。

2,animationiteration:该事件在 CSS 动画重复播放时触发。

3,animationstart:该事件在 CSS 动画开始播放时触发。

十、过渡事件。

1,transitionend:该事件在 CSS 完成过渡后触发。

十一、其它事件。

1,onmessage:该事件通过或者从对象(WebSocket, Web Worker, Event Source 或者子 frame 或父窗口)接收到消息时触发。

2,ononline:该事件在浏览器开始在线工作时触发。

3,onoffline:该事件在浏览器开始离线工作时触发。

4,onpopstate:该事件在窗口的浏览历史(history 对象)发生改变时触发。

5,onshow:该事件当 <menu> 元素在上下文菜单显示时触发。

6,onstorage:该事件在 Web Storage(HTML 5 Web 存储)更新时触发。

7,ontoggle:该事件在用户打开或关闭 <details> 元素时触发。

8,onwheel:该事件在鼠标滚轮在元素上下滚动时触发。

以上这些就是有关JavaScript,要用到的DOM事件。有需要的小伙伴赶紧上车吧!!!我们下期见,拜拜!!!

点赞(0) 打赏

评论列表 共有 0 条评论

暂无评论

热门产品

php编程基础教程.pptx|php编程培训,php,编程,基础,教程,pptx
php编程基础教程.pptx

历史上的今天:04月28日

referrer策略和meta标签的问题

referrer策略和meta标签的问题请求后端接口时,banner图片的请求出现403错误:GEThttp://xxxxxxxxxxxx403(Forbidden)。在网上搜寻一番,解决方法如下:在index.html中的head中添加&lt;meta name=&quot;referrer&quot; content=&quot;no-referrer&quot; /&gt;。在此之前,关于r

热门专题

云南高职单招|云南单招,云南单招网,云南高职单招网,云南高职单招,云南单招学校,云南单招培训
云南高职单招
APP开发|app开发_app开发公司_app软件开发_专业app开发_云南app开发公司_app定制_原生app开发定制
APP开发
开放大学|开放大学报名,开放大学报考,开放大学,什么是开放大学,开放大学学历,开放大学学费,开放大学报名条件,开放大学报名时间,开放大学学历,开放大学专业
开放大学
大理科技管理学校|大理科技管理学校,大理科技,大理科技中等职业技术学校,大理科技管理中等职业技术学校,大理科技学校
大理科技管理学校
小程序开发|微信小程序,小程序开发,小程序,小程序制作,微信小程序开发,小程序公司,小程序开发公司,分销,三级分销系统,分销系统
小程序开发
天麻的功效与作用吃法|天麻的功效与作用,天麻的功效与作用吃法,天麻炖什么治头痛最好,天麻的功效与作用禁忌,天麻多少钱一斤,天麻的功效与作用吃法及禁忌,天麻怎么吃效果最好,天麻粉的功效与作用,天麻怎么吃
天麻的功效与作用吃法
弥勒综合高中|弥勒综合高中
弥勒综合高中
一年制中专|中专学历,中专是什么学历,中专是什么,中专有什么专业,中专升大专,一年制中专
一年制中专

微信小程序

微信扫一扫体验

立即
投稿

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部