|
|
|
|
移动端

1.3.8 HTML5中的事件

《H5和WebGL 3D开发实战详解》第1章HTML 5开发基础—进入WebGL 世界的第一道坎,本书是介绍WebGL技术的一本书,但是在进入WebGL世界之前我们需要迈过HTML门槛,因为这是通向WebGL的必经通道。如果连最基本的HTML开发也做不了,那么开发WebGL就是一件遥不可及的事情。本节为大家介绍HTML5中的事件。

作者:吴亚峰/于复兴/索依娜来源:人民邮电出版社|2017-10-31 18:24

技术沙龙 | 6月30日与多位专家探讨技术高速发展下如何应对运维新挑战!


1.3.8 HTML5中的事件
 
HTML 4中增加了使事件在浏览器中触发动作的能力,比如用户单击元素时启动JavaScript,页面加载完毕后需要执行哪段代码,元素失去焦点时运行哪段脚本,鼠标单击或者移动时运行什么脚本等等。在HTML5中又新加了不少新的事件,我们来看一下这些事件。
 
表1-12所示为部分事件及其描述。接下来我们先看一下这些事件的案例开发效果图,如图1-16所示。因为本部分案例是在某些事件发生时才会触发的,所以效果图中不能显现出所有事件的运行效果,读者应该自己去验证这些事件。
 
表1-12HTML5中的事件
 

 
 

我们这里只示例一小部分事件,意在向读者介绍事件的基本用法,读者在日后的开发中肯定会遇到其他事件或者应用到其他事件。这里的举例仅为冰山一角,大家还需要自行查阅一些资料了解事件属性。接下来我们来看一下图1-16所示的案例开发过程。

代码位置:见随书中源代码/第1章目录下的HTML5/Sample1_14.html。

 
 
  1. 1 <!DOCTYPE html> 
  2. <html><head><title>Sample1_14</title> 
  3. <script> 
  4. 4 function printmsg(){ //文档打印之后执行的脚本方法 
  5. 5 alert("此文档现在正在打印!");} 
  6. 6 function load(){ //页面加载完成后需要执行的脚本方法 
  7. 7 alert("页面已加载!");} 
  8. 8 function showMsg(){ //浏览器窗口尺寸改变时执行的脚本方法 
  9. 9 alert("您已改变浏览器窗口的尺寸!");} 
  10. 10 function upperCase(){ //元素失去焦点时执行的脚本方法 
  11. 11 var x=document.getElementById("fname").value; 
  12. 12 document.getElementById("fname").value=x.toUpperCase();} 
  13. 13 function checkField(val){ //在元素值改变时执行的脚本 
  14. 14 alert("输入值已更改。新值是:" + val);} 
  15. 15 function copyText(){ //单击鼠标时执行的脚本 
  16. 16 document.getElementById("field2").value=document.getElementById("field1").value;} 
  17. 17 function mouseDown(){ //鼠标按下时执行的脚本 
  18. 18 document.getElementById("p1").style.color="red";} 
  19. 19 function mouseUp(){ //鼠标抬起时执行的脚本 
  20. 20 document.getElementById("p1").style.color="green";} 
  21. 21 </script></head> 
  22. 22 <body onafterprint="printmsg()" onload="load()" onresize="showMsg()"> 
  23. 23 <p>本部分案例中我们试验的事件执行脚本时只写了alert,这里只是一个示例, 
  24. 24 在实际开发中我们应该在对应部分开发自己需要的代码。</p> 
  25. 25 <h1>请试着打印此文档,这时候会有提示出现。</h1> 
  26. 26 <p>onbeforeprint 事件与onafterprint 事件的用法一样,只是一个是在打印之 
  27. 27 前执行脚本,一个是在打印之后执行脚本。</p> 
  28. 28 <!--Internet Explorer 和 Firefox 支持 onafterprint 属性。在 IE 中, 
  29. 29 onafterprint 事件在打印对话框出现之前而不是之后发生。--> 
  30. 30 <p><body>元素中还有一个onload 事件,该事件表示在页面加载完毕后执行脚本。</p> 
  31. 31 <p>onresize 事件表示当浏览器窗口改变时执行脚本,本案例也进行了示例, 
  32. 32 读者可以改变一下浏览器窗口大小看一下结果。</p> 
  33. 33 <p>请随意输入一段英文字符,然后把焦点移动到字段外(鼠标单击输入框之外):</p> 
  34. 34 请随意输入一段英文字符,在本元素失去焦点时小写字母会变为大写字母: 
  35. 35 <input type="text" name="fname" id="fname" onblur="upperCase()"> 
  36. 36 <p>请修改输入字段中的文本,然后在字段外单击以触发 onchange。</p> 
  37. 37 请输入文本:<input type="text" name="txt" value="Hello" 
  38. 38 onchange="checkField(this.value)"> 
  39. 39 <p>当按钮被单击时触发函数。此函数把文本从 Field1 复制到 Field2 中。</p> 
  40. 40 Field1: <input type="text" id="field1" value="Hello World!"></br> 
  41. 41 Field2: <input type="text" id="field2"><br><br> 
  42. 42 <button onclick="copyText()">复制文本</button> 
  43. 43 <p id="p1" onmousedown="mouseDown()" onmouseup="mouseUp()"> 
  44. 44 请单击文本!mouseDown()函数当鼠标按钮在段落上被按下时触发。此函数把文本 
  45. 45 颜色设置为红色。mouseUp() 函数在鼠标按钮被释放时触发。mouseUp()函数把文本 
  46. 46 的颜色设置为绿色。</p> 
  47. 47 </body></html> 
 

第3~21行为事件触发时需要执行的JavaScript脚本。本部分的脚本方法只有alert一句话,丝毫没有技术含量,因为这里只是单纯地告诉读者事件运行时执行这段代码,读者在开发时应根据需要进行开发。

第22~32行为body元素的一部分示例。在body元素的起始标签中我们声明了onafterprint、onload、onresize三个事件,这三个事件何时触发我们在注释中已经介绍,我们在前面声明的脚本方法在相应的事件发生时执行。

第33~47行为onblur、onclick、onmousedown、onmouseup几个事件的应用示例。除失去焦点时执行的脚本事件,剩下的几个事件都与鼠标有关系,但是这只是其中一小部分,还有很多关于鼠标的事件我们未介绍,应用这些事件我们可以完成很多事情。

到此为止,我们便介绍完毕HTML事件了。因为篇幅有限,所以很多事件没有列出来,也没有进行示例用法解释,读者若是需要了解这方面的内容,可以在网上查找相关资料。学习事件部分并不困难,它的精髓在JavaScript脚本的开发过程中,我们在后面的章节会介绍。

 
喜欢的朋友可以添加我们的微信账号:

51CTO读书频道二维码


51CTO读书频道活动讨论群:365934973
【责任编辑:book TEL:(010)68476606】

回书目   上一节   下一节
点赞 0
分享:
大家都在看
猜你喜欢

读 书 +更多

C#入门经典(第3版)

本书将全面介绍C#编程的所有知识,共分为5篇:第1篇是C#语言:介绍了C#语言的所有内容,从基础知识到面向对象的技术,应有尽有。第2篇是Win...

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊