HTML的DOM事件相关知识有哪些

这篇文章主要介绍“HTML的DOM事件相关知识有哪些”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“HTML的DOM事件相关知识有哪些”文章能帮助大家解决问题。

专注于为中小企业提供成都网站设计、网站建设、外贸网站建设服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业鄠邑免费做网站提供优质的服务。我们立足成都，凝聚了一批互联网行业人才，有力地推动了上千多家企业的稳健成长，帮助中小企业通过网站建设实现规模扩充和转变。

HTML DOM 事件

HTML DOM 事件允许Javascript在HTML文档元素中注册不同事件处理程序。

事件通常与函数结合使用，函数不会在事件发生前被执行！ (如用户点击按钮)。

提示：在 W3C 2 级 DOM 事件中规范了事件模型。

HTML DOM 事件

DOM：指明使用的 DOM 属性级别。

鼠标事件

属性	描述	DOM
onclick	当用户点击某个对象时调用的事件句柄。	2
oncontextmenu	在用户点击鼠标右键打开上下文菜单时触发
ondblclick	当用户双击某个对象时调用的事件句柄。	2
onmousedown	鼠标按钮被按下。	2
onmouseenter	当鼠标指针移动到元素上时触发。	2
onmouseleave	当鼠标指针移出元素时触发	2
onmousemove	鼠标被移动。	2
onmouseover	鼠标移到某元素之上。	2
onmouseout	鼠标从某元素移开。	2
onmouseup	鼠标按键被松开。	2

键盘事件

属性	描述	DOM
onkeydown	某个键盘按键被按下。	2
onkeypress	某个键盘按键被按下并松开。	2
onkeyup	某个键盘按键被松开。	2

框架/对象（Frame/Object）事件

属性	描述	DOM
onabort	图像的加载被中断。 (	2
onbeforeunload	该事件在即将离开页面（刷新或关闭）时触发	2
onerror	在加载文档或图像时发生错误。 (
onhashchange	该事件在当前 URL 的锚部分发生修改时触发。
onload	一张页面或一幅图像完成加载。	2
onpageshow	该事件在用户访问页面时触发
onpagehide	该事件在用户离开当前网页跳转到另外一个页面时触发
onresize	窗口或框架被重新调整大小。	2
onscroll	当文档被滚动时发生的事件。	2
onunload	用户退出页面。 ( 和 )	2

表单事件

属性	描述	DOM
onblur	元素失去焦点时触发	2
onchange	该事件在表单元素的内容改变时触发( , , )</td><td>2</td></tr><tr><td>onfocus</td><td>元素获取焦点时触发</td><td>2</td></tr><tr><td>onfocusin</td><td>元素即将获取焦点时触发</td><td>2</td></tr><tr><td>onfocusout</td><td>元素即将失去焦点时触发</td><td>2</td></tr><tr><td>oninput</td><td>元素获取用户输入时触发</td><td>3</td></tr><tr><td>onreset</td><td>表单重置时触发</td><td>2</td></tr><tr><td>onsearch</td><td>用户向搜索域输入文本时触发 ( <input="search">)</td><td> </td></tr><tr><td>onselect</td><td>用户选取文本时触发 ( <input> 和 <textarea>)</td><td>2</td></tr><tr><td>onsubmit</td><td>表单提交时触发</td><td>2</td></tr></tbody></table><p><strong>剪贴板事件</strong></p><table class="border"><tbody><trl><th>属性</th><th>描述</th><th>DOM</th></tr><tr><td>oncopy</td><td>该事件在用户拷贝元素内容时触发</td><td> </td></tr><tr><td>oncut</td><td>该事件在用户剪切元素内容时触发</td><td> </td></tr><tr><td>onpaste</td><td>该事件在用户粘贴元素内容时触发</td><td> </td></tr></tbody></table><p><strong>打印事件</strong></p><table class="border"><tbody><trl><th>属性</th><th>描述</th><th>DOM</th></tr><tr><td>onafterprint</td><td>该事件在页面已经开始打印，或者打印窗口已经关闭时触发</td><td> </td></tr><tr><td>onbeforeprint</td><td>该事件在页面即将开始打印时触发</td><td> </td></tr></tbody></table><p><strong>拖动事件</strong></p><table class="border"><tbody><trl><th>事件</th><th>描述</th><th>DOM</th></tr><tr><td>ondrag</td><td>该事件在元素正在拖动时触发</td><td> </td></tr><tr><td>ondragend</td><td>该事件在用户完成元素的拖动时触发</td><td> </td></tr><tr><td>ondragenter</td><td>该事件在拖动的元素进入放置目标时触发</td><td> </td></tr><tr><td>ondragleave</td><td>该事件在拖动元素离开放置目标时触发</td><td> </td></tr><tr><td>ondragover</td><td>该事件在拖动元素在放置目标上时触发</td><td> </td></tr><tr><td>ondragstart</td><td>该事件在用户开始拖动元素时触发</td><td> </td></tr><tr><td>ondrop</td><td>该事件在拖动元素放置在目标区域时触发</td><td> </td></tr></tbody></table><p><strong>多媒体（Media）事件</strong></p><table class="border"><tbody><trl><th>事件</th><th>描述</th><th>DOM</th></tr><tr><td>onabort</td><td>事件在视频/音频（audio/video）终止加载时触发。</td><td> </td></tr><tr><td>oncanplay</td><td>事件在用户可以开始播放视频/音频（audio/video）时触发。</td><td> </td></tr><tr><td>oncanplaythrough</td><td>事件在视频/音频（audio/video）可以正常播放且无需停顿和缓冲时触发。</td><td> </td></tr><tr><td>ondurationchange</td><td>事件在视频/音频（audio/video）的时长发生变化时触发。</td><td> </td></tr><tr><td>onemptied</td><td>当期播放列表为空时触发</td><td> </td></tr><tr><td>onended</td><td>事件在视频/音频（audio/video）播放结束时触发。</td><td> </td></tr><tr><td>onerror</td><td>事件在视频/音频（audio/video）数据加载期间发生错误时触发。</td><td> </td></tr><tr><td>onloadeddata</td><td>事件在浏览器加载视频/音频（audio/video）当前帧时触发触发。</td><td> </td></tr><tr><td>onloadedmetadata</td><td>事件在指定视频/音频（audio/video）的元数据加载后触发。</td><td> </td></tr><tr><td>onloadstart</td><td>事件在浏览器开始寻找指定视频/音频（audio/video）触发。</td><td> </td></tr><tr><td>onpause</td><td>事件在视频/音频（audio/video）暂停时触发。</td><td> </td></tr><tr><td>onplay</td><td>事件在视频/音频（audio/video）开始播放时触发。</td><td> </td></tr><tr><td>onplaying</td><td>事件在视频/音频（audio/video）暂停或者在缓冲后准备重新开始播放时触发。</td><td> </td></tr><tr><td>onprogress</td><td>事件在浏览器下载指定的视频/音频（audio/video）时触发。</td><td> </td></tr><tr><td>onratechange</td><td>事件在视频/音频（audio/video）的播放速度发送改变时触发。</td><td> </td></tr><tr><td>onseeked</td><td>事件在用户重新定位视频/音频（audio/video）的播放位置后触发。</td><td> </td></tr><tr><td>onseeking</td><td>事件在用户开始重新定位视频/音频（audio/video）时触发。</td><td> </td></tr><tr><td>onstalled</td><td>事件在浏览器获取媒体数据，但媒体数据不可用时触发。</td><td> </td></tr><tr><td>onsuspend</td><td>事件在浏览器读取媒体数据中止时触发。</td><td> </td></tr><tr><td>ontimeupdate</td><td>事件在当前的播放位置发送改变时触发。</td><td> </td></tr><tr><td>onvolumechange</td><td>事件在音量发生改变时触发。</td><td> </td></tr><tr><td>onwaiting</td><td>事件在视频由于要播放下一帧而需要缓冲时触发。</td><td> </td></tr></tbody></table><p><strong>动画事件</strong></p><table class="border"><tbody><trl><th>事件</th><th>描述</th><th>DOM</th></tr><tr><td>animationend</td><td>该事件在 CSS 动画结束播放时触发</td><td> </td></tr><tr><td>animationiteration</td><td>该事件在 CSS 动画重复播放时触发</td><td> </td></tr><tr><td>animationstart</td><td>该事件在 CSS 动画开始播放时触发</td><td> </td></tr></tbody></table><p><strong>过渡事件</strong></p><table class="border"><tbody><trl><th>事件</th><th>描述</th><th>DOM</th></tr><tr><td>transitionend</td><td>该事件在 CSS 完成过渡后触发。</td><td> </td></tr></tbody></table><p><strong>其他事件</strong></p><table class="border"><tbody><trl><th>事件</th><th>描述</th><th>DOM</th></tr><tr><td>onmessage</td><td>该事件通过或者从对象(WebSocket, Web Worker, Event Source 或者子 frame 或父窗口)接收到消息时触发</td><td> </td></tr><tr><td>onmousewheel</td><td>已废弃。使用 onwheel 事件替代</td><td> </td></tr><tr><td>ononline</td><td>该事件在浏览器开始在线工作时触发。</td><td> </td></tr><tr><td>onoffline</td><td>该事件在浏览器开始离线工作时触发。</td><td> </td></tr><tr><td>onpopstate</td><td>该事件在窗口的浏览历史（history 对象）发生改变时触发。</td><td> </td></tr><tr><td>onshow</td><td>该事件当 <menu> 元素在上下文菜单显示时触发</td><td> </td></tr><tr><td>onstorage</td><td>该事件在 Web Storage(HTML 5 Web 存储)更新时触发</td><td> </td></tr><tr><td>ontoggle</td><td>该事件在用户打开或关闭 <details> 元素时触发</td><td> </td></tr><tr><td>onwheel</td><td>该事件在鼠标滚轮在元素上下滚动时触发</td><td> </td></tr></tbody></table><p><strong>事件对象</strong></p><p><strong>常量</strong></p><table class="border"><tbody><trl><th>静态变量</th><th>描述</th><th>DOM</th></tr><tr><td>CAPTURING-PHASE</td><td>当前事件阶段为捕获阶段(3)</td><td>1</td></tr><tr><td>AT-TARGET</td><td>当前事件是目标阶段,在评估目标事件(1)</td><td>2</td></tr><tr><td>BUBBLING-PHASE</td><td>当前的事件为冒泡阶段 (2)</td><td>3</td></tr></tbody></table><p><strong>属性</strong></p><table class="border"><tbody><trl><th>属性</th><th>描述</th><th>DOM</th></tr><tr><td>bubbles</td><td>返回布尔值，指示事件是否是起泡事件类型。</td><td>2</td></tr><tr><td>cancelable</td><td>返回布尔值，指示事件是否可拥可取消的默认动作。</td><td>2</td></tr><tr><td>currentTarget</td><td>返回其事件监听器触发该事件的元素。</td><td>2</td></tr><tr><td>eventPhase</td><td>返回事件传播的当前阶段。</td><td>2</td></tr><tr><td>target</td><td>返回触发此事件的元素（事件的目标节点）。</td><td>2</td></tr><tr><td>timeStamp</td><td>返回事件生成的日期和时间。</td><td>2</td></tr><tr><td>type</td><td>返回当前 Event 对象表示的事件的名称。</td><td>2</td></tr></tbody></table><p><strong>方法</strong></p><table class="border"><tbody><trl><th>方法</th><th>描述</th><th>DOM</th></tr><tr><td>initEvent()</td><td>初始化新创建的 Event 对象的属性。</td><td>2</td></tr><tr><td>preventDefault()</td><td>通知浏览器不要执行与事件关联的默认动作。</td><td>2</td></tr><tr><td>stopPropagation()</td><td>不再派发事件。</td><td>2</td></tr></tbody></table><p><strong>目标事件对象</strong></p><p>方法</p><table class="border"><tbody><trl><th>方法</th><th>描述</th><th>DOM</th></tr><tr><td>addEventListener()</td><td>允许在目标事件中注册监听事件(IE8 = attachEvent())</td><td>2</td></tr><tr><td>dispatchEvent()</td><td>允许发送事件到监听器上 (IE8 = fireEvent())</td><td>2</td></tr><tr><td>removeEventListener()</td><td>运行一次注册在事件目标上的监听事件(IE8 = detachEvent())</td><td>2</td></tr></tbody></table><p><strong>事件监听对象</strong></p><p><strong>方法</strong></p><table class="border"><tbody><trl><th>方法</th><th>描述</th><th>DOM</th></tr><tr><td>handleEvent()</td><td>把任意对象注册为事件处理程序</td><td>2</td></tr></tbody></table><p><strong>文档事件对象</strong></p><p><strong>方法</strong></p><table class="border"><tbody><trl><th>方法</th><th>描述</th><th>DOM</th></tr><tr><td>createEvent()</td><td> </td><td>2</td></tr></tbody></table><p><strong>鼠标/键盘事件对象</strong></p><p><strong>属性</strong></p><table class="border"><tbody><trl><th>属性</th><th>描述</th><th>DOM</th></tr><tr><td>altKey</td><td>返回当事件被触发时，"ALT" 是否被按下。</td><td>2</td></tr><tr><td>button</td><td>返回当事件被触发时，哪个鼠标按钮被点击。</td><td>2</td></tr><tr><td>clientX</td><td>返回当事件被触发时，鼠标指针的水平坐标。</td><td>2</td></tr><tr><td>clientY</td><td>返回当事件被触发时，鼠标指针的垂直坐标。</td><td>2</td></tr><tr><td>ctrlKey</td><td>返回当事件被触发时，"CTRL" 键是否被按下。</td><td>2</td></tr><tr><td>Location</td><td>返回按键在设备上的位置</td><td>3</td></tr><tr><td>charCode</td><td>返回onkeypress事件触发键值的字母代码。</td><td>2</td></tr><tr><td>key</td><td>在按下按键时返回按键的标识符。</td><td>3</td></tr><tr><td>keyCode</td><td>返回onkeypress事件触发的键的值的字符代码，或者 onkeydown 或 onkeyup 事件的键的代码。</td><td>2</td></tr><tr><td>which</td><td>返回onkeypress事件触发的键的值的字符代码，或者 onkeydown 或 onkeyup 事件的键的代码。</td><td>2</td></tr><tr><td>metaKey</td><td>返回当事件被触发时，"meta" 键是否被按下。</td><td>2</td></tr><tr><td>relatedTarget</td><td>返回与事件的目标节点相关的节点。</td><td>2</td></tr><tr><td>screenX</td><td>返回当某个事件被触发时，鼠标指针的水平坐标。</td><td>2</td></tr><tr><td>screenY</td><td>返回当某个事件被触发时，鼠标指针的垂直坐标。</td><td>2</td></tr><tr><td>shiftKey</td><td>返回当事件被触发时，"SHIFT" 键是否被按下。</td><td>2</td></tr></tbody></table><p><strong>方法</strong></p><table class="border"><tbody><trl><th>方法</th><th>描述</th><th>W3C</th></tr><tr><td>initMouseEvent()</td><td>初始化鼠标事件对象的值</td><td>2</td></tr><tr><td>initKeyboardEvent()</td><td>初始化键盘事件对象的值</td><td>3</td></tr></tbody></table><p>关于“HTML的DOM事件相关知识有哪些”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注创新互联行业资讯频道，小编每天都会为大家更新不同的知识点。</p> <br> 分享文章：HTML的DOM事件相关知识有哪些 <br> 转载源于：<a href="http://dzwzjz.com/article/jiidsi.html">http://dzwzjz.com/article/jiidsi.html</a> </div> </div> <div class="othernews"> <h3>其他资讯</h3> <div class="othernews_list"> <ul> <li> <a href="/article/dophhcp.html">GIS在海洋技术的应用 gis在海洋技术的应用研究</a> </li><li> <a href="/article/dophhcs.html">帝国CMS后台样式美化帝国cms视频教程</a> </li><li> <a href="/article/dophhde.html">mysql锁一行怎么锁 mysql如何锁定一行</a> </li><li> <a href="/article/dophppj.html">关于pjaxzblog的信息</a> </li><li> <a href="/article/dophpjs.html">linux命令行自动登录 linux系统自动登录脚本</a> </li> </ul> </div> </div> </div> </div> <div class="footer"> <div class="footer_content"> <div class="footer_content_top clear"> <div class="content_top_share fl"> <div><img src="/Public/Home/img/logo.png"></div> <div class="top_share_content"> <dd>分享至：</dd> <dt class="bdsharebuttonbox clear" id="share"> <a href="#" class="bds_tsina iconfont fl" data-cmd="tsina" title="分享到新浪微博"></a> <a href="#" class="bds_sqq iconfont fl" data-cmd="sqq" title="分享到QQ好友"></a> <a href="#" class="bds_weixin iconfont fl" data-cmd="weixin" title="分享到微信"></a> <a href="#" class="bds_weixin iconfont fl" data-cmd="tieba" title="分享到贴吧"></a> </dt> <script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"16"},"share":{}};with(document)0[(getElementsByTagName('head')[0]\|\|body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script> </div> </div> <div class="content_top_left fl clear"> <div class="top_left_list fl"> <dd><a href="/about/">关于我们</a></dd> <dt> <a href="/about/#gsjj">公司简介</a> <a href="/about/#fzlc">发展历程</a> </dt> </div> <div class="top_left_list fl"> <dd><a href="/service/">服务项目</a></dd> <dt> <a href="/service/">高端网站建设</a> <a href="/miniprogram/">小程序开发</a> <a href="/service/app.html">APP开发</a> <a href="/service/yingxiao.html">网络营销</a> </dt> </div> <div class="top_left_list fl"> <dd><a href="/jianzhan/">建站知识</a></dd> <dt> <a href="/jianzhan/">行业新闻</a> <a href="/jianzhan/">建站学堂</a> <a href="/jianzhan/">常见问题</a> </dt> </div> <div class="top_left_list fl"> <dd><a href="/contact/">联系我们</a></dd> <dt> <a href="/contact/#lxwm">公司地址</a> <a href="/contact/#rczp">人才招聘</a> </dt> </div> </div> <div class="content_top_right addressR fr"> <div class="top_right_title addressf_title"> <a href="javascript:;" class="on">成都</a> <a href="javascript:;">达州</a> </div> <div class="top_right_content addressf"> <div class="right_content_li on"> <div class="right_content_list clear"> <dd class="fl iconfont"></dd> <dt class="fl">电话：028-86922220</dt> </div> <div class="right_content_list clear"> <dd class="fl iconfont"></dd> <dt class="fl">地址：成都市太升南路288号锦天国际A幢1002号</dt> </div> </div> <div class="right_content_li"> <div class="right_content_list clear"> <dd class="fl iconfont"></dd> <dt class="fl">电话：028-86922220</dt> </div> <div class="right_content_list clear"> <dd class="fl iconfont"></dd> <dt class="fl">地址：达州市南岸区弹子石腾龙大道58号2栋21-6</dt> </div> </div> </div> </div> </div> <div class="link"> 友情链接： <a href="https://www.cdcxhl.com/quanwang.html" title="网络营销推广" target="_blank">网络营销推广</a> <a href="http://www.4006tel.net/vision/" title="UI设计" target="_blank">UI设计</a> <a href="http://www.cqcxhl.com/miniprogram/" title="小程序开发" target="_blank">小程序开发</a> <a href="http://www.cxjianzhan.com/baojia/" title="网站建设费用" target="_blank">网站建设费用</a> <a href="https://www.cdcxhl.com/mobile.html" title="手机网站" target="_blank">手机网站</a> <a href="https://www.cdcxhl.com/yingxiao.html" title="营销型网站" target="_blank">营销型网站</a> <a href="https://www.cdxwcx.com/jifang/wenjiang.html" title="温江服务器托管" target="_blank">温江服务器托管</a> <a href="http://www.cqcxhl.com/miniprogram/" title="重庆小程序开发公司" target="_blank">重庆小程序开发公司</a> <a href="https://www.cdxwcx.com/400/" title="成都400电话办理" target="_blank">成都400电话办理</a> <a href="https://www.cdcxhl.com/xiangyingshi.html" title="响应式网站设计" target="_blank">响应式网站设计</a> </div> </div> <div class="footer_content_copyright clear">版权所有：青羊区大橙子信息咨询工作室 <a href="http://beian.miit.gov.cn/" rel="nofollow" target="_blank">蜀ICP备2022028542号-14</a> </div> </div> <!--浮窗--> <div class="FloatingWindow clear"> <a href="tencent://message/?uin=1683211881&Site=&Menu=yes" class="FloatingWindow_list fr"> <div class="FloatingWindow_list_title"> <dd class="iconfont"></dd> <dt><span>在线</span>咨询</dt> </div> </a> <a href="javascript:;" class="FloatingWindow_list fr"> <div class="FloatingWindow_list_title"> <dd class="iconfont"></dd> <dt>服务热线</dt> </div> <div class="FloatingWindow_list_down fadeInRight animated">服务热线：028-86922220</div> </a> <a href="javascript:;" class="FloatingWindow_list fr STop"> <div class="FloatingWindow_list_title"> <dd class="iconfont"></dd> <dt>TOP</dt> </div> </a> </div> <script src="/Public/Home/js/jquery-1.8.3.min.js"></script> <script src="/Public/Home/js/comm.js"></script> <script src="/Public/Home/js/wow.js"></script> <script src="/Public/Home/js/common.js"></script> </body> </html> <script> $(".cont img").each(function(){ var src = $(this).attr("src"); //获取图片地址 var str=new RegExp("http"); var result=str.test(src); if(result==false){ var url = "https://www.cdcxhl.com"+src; //绝对路径 $(this).attr("src",url); } }); window.onload=function(){ document.oncontextmenu=function(){ return false; } } </script>

大橙子网站建设，新征程启航

HTML的DOM事件相关知识有哪些