Javascript - 标准事件

首页 / JavaScript入门教程 / Javascript - 标准事件

什么是事件?

HTML 事件是发生在 HTML 元素上的事情,当在 HTML 页面中使用 JavaScript 时, JavaScript 可以触发这些事件。

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

点击事件

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

请尝试以下示例。

<html>
   <head>   
      <script type = "text/javascript">
         <!--
            function sayHello() {
               alert("Hello World")
            }
         //-->
      </script>      
   </head>
   
   <body>
      <p>Click the following button and see result</p>      
      <form>
         <input type = "button" onclick = "sayHello()" value = "Say Hello" />
      </form>      
   </body>
</html>

运行上面代码输出

无涯教程网

链接:https://www.learnfk.comhttps://www.learnfk.com/javascript/javascript-events.html

来源:LearnFk无涯教程网

提交事件

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

以下示例显示如何使用onsubmit,在这里无涯教程在将表单数据提交到Web服务器之前调用 validate()函数。如果 validate()函数返回true,则将提交表单,否则将不提交数据。

<html>
   <head>   
      <script type = "text/javascript">
         <!--
            function validation() {
               all validation goes here
               .........
               return either true or false
            }
         //-->
      </script>      
   </head>
   
   <body>   
      <form method = "POST" action = "t.cgi" onsubmit = "return validate()">
         .......
         <input type = "submit" value = "Submit" />
      </form>      
   </body>
</html>

鼠标移动事件

将鼠标移到任何元素上时会触发onmouseover事件,而将鼠标从该元素上移出时会触发onmouseout事件。 请尝试以下示例。

<html>
   <head>   
      <script type = "text/javascript">
         <!--
            function over() {
               document.write ("Mouse Over");
            }            
            function out() {
               document.write ("Mouse Out");
            }            
         //-->
      </script>      
   </head>
   
   <body>
      <p>Bring your mouse inside the division to see the result:</p>      
      <div onmouseover = "over()" onmouseout = "out()">
         <h2> This is inside the division </h2>
      </div>         
   </body>
</html>

运行上面代码输出

无涯教程网

链接:https://www.learnfk.comhttps://www.learnfk.com/javascript/javascript-events.html

来源:LearnFk无涯教程网

HTML5 标准事件

此处列出了标准HTML 5事件供您参考。这里的script指示针对该事件要执行的Javascript函数。

属性说明
Offline脚本文档脱机时触发
Onabort脚本中止事件触发
onafterprint脚本打印文件后触发
onbeforeonload脚本在文档加载之前触发
onbeforeprint脚本在文档打印之前触发
onblur脚本当窗口失去焦点时触发
oncanplay脚本当媒体可以开始播放但可能需要停止缓冲才能触发
oncanplaythrough脚本触发何时可以播放完媒体而无需停止缓冲
onchange脚本元素更改时触发
onclick脚本点击鼠标触发
oncontextmenu脚本触发上下文菜单时触发
ondblclick脚本双击鼠标触发
ondrag脚本拖动元素时触发
ondragend脚本拖动操作结束时触发
ondragenter脚本将元素拖动到有效放置目标时触发
ondragleave脚本将元素拖动到有效放置目标上方时触发
ondragover脚本拖动操作开始时触发
ondragstart脚本拖动操作开始时触发
ondrop脚本在拖放拖动元素时触发
ondurationchange脚本更改媒体长度时触发
onemptied脚本当媒体资源元素突然变空时触发。
onended脚本当媒体用完时触发
onerror脚本发生错误时触发
onfocus脚本在窗口获得焦点时触发
onformchange脚本表单更改时触发
onforminput脚本当表单获得用户输入时触发
onhaschange脚本文档更改时触发
oninput脚本当元素获得用户输入时触发
oninvalid脚本当元素无效时触发
onkeydown脚本按下键时触发
onkeypress脚本按下和释放键时触发
onkeyup脚本释放键时触发
onload脚本在文档加载时触发
onloadeddata脚本在加载媒体数据时触发
onloadedmetadata脚本在加载媒体元素的持续时间和其他媒体数据时触发
onloadstart脚本在浏览器开始加载媒体数据时触发
onmessage脚本触发消息时触发
onmousedown脚本按下鼠标按钮时触发
onmousemove脚本鼠标指针移动时触发
onmouseout脚本当鼠标指针移出元素时触发
onmouseover脚本当鼠标指针移到某个元素上时触发
onmouseup脚本释放鼠标按钮时触发
onmousewheel脚本在旋转鼠标滚轮时触发
onoffline脚本文档脱机时触发
onoine脚本文档在线时触发
ononline脚本文档在线时触发
onpagehide脚本隐藏窗口时触发
onpageshow脚本在窗口可见时触发
onpause脚本在媒体数据暂停时触发
onplay脚本当媒体数据开始播放时触发
onplaying脚本媒体数据开始播放时触发
onpopstate脚本在窗口的历史记录更改时触发
onprogress脚本在浏览器获取媒体数据时触发
onratechange脚本当媒体数据的播放速度更改时触发
onreadystatechange脚本准备状态更改时触发
onredo脚本在文档执行重做时触发
onresize脚本调整窗口大小时触发
onscroll脚本在滚动元素的滚动条时触发
onseeked脚本当媒体元素的搜索属性不再为真且搜索结束时触发
onseeking脚本在媒体元素的搜索属性为true且搜索已开始时触发
onselect脚本在选择元素时触发
onstalled脚本在获取媒体数据时出现错误时触发
onstorage脚本文档加载时触发
onsubmit脚本提交表单时触发
onsuspend脚本在浏览器已获取媒体数据但在获取整个媒体文件之前已停止时触发
ontimeupdate脚本当媒体更改其播放位置时触发
onundo脚本在文档执行撤消操作时触发
onunload脚本用户离开文档时触发
onvolumechange脚本在媒体更改音量时触发,也在音量设置为"静音"时触发
onwaiting脚本当媒体停止播放但有望恢复播放时触发

这一章《Javascript - 标准事件》你学到了什么?在下面做个笔记吧!做站不易,你的分享是对我们最大的支持,感谢!😊

好记忆不如烂笔头。留下你的足迹吧 :)

猜你喜欢

分布式技术原理与算法解析 -〔聂鹏程〕

说透中台 -〔王健〕

OAuth 2.0实战课 -〔王新栋〕

PyTorch深度学习实战 -〔方远〕

获取递归函数 React.js/JavaScript 的深度

如何在 React 中保存输入字段更改?

如何减少plotly js中标题和圆环图之间的空间?

合并排序算法适用于 golang 但不适用于 javascript

如果单击外部则切换菜单然后隐藏

在网页上加载小部件

视频教程

JavaScript - 12-什么是变量 更多视频教程 »