PowerPoint 演示文稿

Size: px

Start display at page:

Download "PowerPoint 演示文稿"

籍包
5 years ago
Views:

1 事件管理科学与工程学科耿方方

2 主要内容事件处理程序事件流事件对象事件类型

3 JavaScript 与 HTML 之间的交互是通过事件实现的事件, 就是文档或浏览器窗口发生的一些特定的交互瞬间也就是鼠标或热键的动作可以使用侦听器 ( 或处理程序 ) 来预订事件, 以便事件发生时执行相应的代码

4 事件处理程序事件如何触发 JavaScript 代码当用户在 Web 页面上同 HTML 进行交互时, 事件触发 JavaScript 代码的过程分为三个步骤, 这些步骤被称为事件处理 1 选中需要使用脚本进行事件响应的元素节点 2 声明需要在选中节点上响应触发的事件 3 指定当事件发生时需要运行的代码

5 事件处理程序 HTML 事件处理程序事件就是用户或浏览器自身执行的某种动作诸如 click load 和 mouseover, 都是事件的名字而响应某个事件的函数叫做事件处理程序 ( 或事件侦听器 ) 事件处理程序的名字以 on 开头, 因此 click 事件的事件处理程序就是 onclick,load 事件的事件处理程序就是 onload 为事件指定处理程序的方式有好几种 : HTML 事件处理程序 : 早期版本的 HTML 中会包含一组属性用来响应它所属元素的事件这些属性的名字和事件的名字相匹配, 它们的值则是当事件发生时需要运行的函数的名称例如 :<a onclick= hide() > 表示当用户点击这个 <a> 元素后,hide () 方法会被调用这种事件处理的方法用的很少, 由于要实现 JavaScript 和 HTML 的分离

6 事件处理程序 HTML 事件处理程序案例 1: <div id="page"> <h1>list King</h1> <h2>new Account</h2> < f o r m m e t h o d = " p o s t " action=" <label for="username">create a username: </label> <input type="text" id="username" onblur="checkusername()" /> <div id="feedback"></div> <label for="password">create a password: </label> <input type="password" id="password" /> <input type="submit" value="sign up!" /> </form> function checkusername() { var elmsg = document.getelementbyid('feedback'); var elusername = document.getelementbyid('username'); if (elusername.value.length < 5) { elmsg.textcontent = 'Username must be 5 characters or more'; // Set msg else { elmsg.textcontent = '';

7 事件处理程序 DOM 事件处理程序传统的 DOM 事件处理程序所有现代浏览器都支持这种创建事件处理程序的方法, 不过每个事件处理程序只能附加一个函数语法 : element.onevent=functionname; element: 元素, 目标 DOM 节点 onevent: 事件, 绑定到该节点的事件, 使用前缀 on functionname: 需要调用的函数的名称 ( 后面不带小括号 )

8 事件处理程序 DOM 事件处理程序案例 2: < f o r m m e t h o d = " p o s t " action=" <label for="username">create a username: </label> <input type="text" id="username" /> <div id="feedback"></div> <label for="password">create a password: </label> < i n p u t t y p e = " p a s s w o r d " id="password" /> <input type="submit" value="sign up" /> </form> <script> function checkusername() { var elmsg = document.getelementbyid('feedback'); if (this.value.length < 5) { elmsg.textcontent = 'Username must be 5 characters or more'; else { elmsg.textcontent = ''; var elusername = document.getelementbyid ('username'); elusername.onblur = checkusername; // When it loses focus call checkusername() </script>

9 事件处理程序 DOM 事件处理程序 DOM 事件处理程序近几年又新增了一种事件处理程序, 就是事件监听器, 它可以同时触发多个函数, 但是在旧的浏览器中不被支持语法 : element.addeventlisterner('event',functionname[,boolean]); element: 目标 DOM 元素节点 event: 在引号中指定需要绑定到节点的事件 functionname: 需要调用的函数的名称事件流 : 指定是否为捕获方式的事件响应, 通常被设置为 false

10 事件处理程序 DOM 事件处理程序案例 3: < f o r m m e t h o d = " p o s t " action=" <label for="username">create a username: </label> <input type="text" id="username" /> <div id="feedback"></div> <label for="password">create a password: </label> < i n p u t t y p e = " p a s s w o r d " id="password" /> <input type="submit" value="sign up" /> </form> <script> function checkusername() { var elmsg = document.getelementbyid('feedback'); if (this.value.length < 5) { elmsg.textcontent = 'Username must be 5 characters or more'; else { elmsg.textcontent = ''; var elusername = document.getelementbyid ('username'); elusername.addeventlistener ('blur', checkusername, false); </script>

11 事件处理程序 DOM 事件处理程序 DOM 事件处理程序和事件监听器中使用参数由于在注册事件处理程序和事件监听器时, 在函数名称的后面是没有小括号的, 因此需要采用其他的手段来传递参数语法 : element.addeventlisterner('event',function(){functionname( 数 );[,Boolean]); 参

12 事件处理程序 DOM 事件处理程序案例 4: <script> var elusername = document.getelementbyid('username'); // Username input var elmsg = document.getelementbyid('feedback'); // Error msg element function checkusername(minlength) { // Declare function if (elusername.value.length < minlength) { // If username too short // Set the error message elmsg.innerhtml = 'Username must be ' + minlength + ' characters or more'; else { // Otherwise elmsg.innerhtml = ''; // Clear msg elusername.addeventlistener('blur', function() { // When it loses focus checkusername(5); // Pass argument here, false); </script>

13 事件流事件流 : 由于 DOM 结构是一个树型结构,HTML 元素都位于另一些元素中如果移动鼠标到一个链接上, 或者点击一个链接, 同样会把鼠标移动到它的父元素上, 或者点击它的父元素因此事件流描述的是从页面中接收事件的顺序, 事件流包括事件冒泡和事件捕获冒泡事件 : 事件的传播是从最特定的事件目标到最不特定的事件目标即从 DOM 树的叶子到根捕获事件 : 事件的传播是从最不特定的事件目标到最特定的事件目标即从 DOM 树的根到叶子

14 事件流冒泡事件 : 以下面的网页为例 : <html> <head> <title> 冒泡事件 </title> </head> <body> <div id= mydiv >Click me</div> </body> <html> 1 所有现代浏览器都支持事件冒泡, 但在具体实现中略有差别 : IE5.5 及更早版本中事件冒泡会跳过 <html> 元素 ( 从 body 直接跳到 document) IE9 Firefox Chrome 和 Safari 则将事件一直冒泡到 window 对象

15 事件流捕获事件 : 2 IE9 Firefox Chrome Opera 和 Safari 都支持事件捕获尽管 DOM 标准要求事件应该从 document 对象开始传播, 但这些浏览器都是从 window 对象开始捕获事件的 3 由于老版本浏览器不支持, 很少有人使用事件捕获建议使用事件冒泡

16 事件流当代码在一个元素和其祖先元素或后代元素上都有事件处理程序时, 事件流才会变得非常重要对于 DOM 事件处理程序, 所有现代浏览器默认都会使用事件冒泡模型而不是事件捕获模型 addeventlistener() 方法的最后一个参数允许选择事件触发的方向 : true 表示捕获方式 false 表示冒泡方式

17 事件流案例 5:<body> <div id="page"> <h1>list King</h1> <h2>bubble</h2> <ul id="list"> <li id="item"><a id="link">fresh figs</a></li> </ul> </div> <div id="page"> <h1>list King</h1> <h2>capture</h2> <ul id="list2"> <li id="item2"><a id="link2">fresh figs</a></li> </ul> </div> <script> function showelement() { alert(this.innerhtml); el = document.getelementbyid("list"); el.addeventlistener('click', showelement, false); el = document.getelementbyid("item"); el.addeventlistener('click', showelement, false); el = document.getelementbyid("link"); el.addeventlistener('click', showelement, false); el = document.getelementbyid("list2"); el.addeventlistener('click', showelement, true); el = document.getelementbyid("item2"); el.addeventlistener('click', showelement, true); el = document.getelementbyid("link2"); el.addeventlistener('click', showelement, true); </script>

18 事件对象在触发 DOM 上的某个事件时, 会产生一个事件对象 event, 这个对象中包含所有与特定事件相关的信息包括导致事件的元素, 事件的类型以及其他与特定事件相关的信息例如, 鼠标操作导致的事件对象中, 会包含鼠标位置的信息, 而键盘操作导致的事件对象中, 会包含与按下的键有关的信息所有浏览器都支持 event 对象, 但支持方式不同如果需要传递一个参数给命名函数, 事件对象作为匿名封装函数的第一个参数传递进去, 然后需要为命名函数指定相应的参数当事件对象被传递给函数时, 它的参数名称通常都是 e(event 的缩写 ) 不过需要注意的是, 有些程序员使用参数 e 来表示错误对象, 所以在某些脚本中 e 来表示错误对象, 也可能表示错误

19 事件对象无参数的事件监听器 function checkusername(e){ var target=e.target; var el=document.getelementbyid('username'); el.addeventlistener('blur',checkusername,false);

20 事件对象带参数的事件监听器 function checkusername(e,minlength){ var target=e.target; var el=document.getelementbyid('username'); el.addeventlistener('blur',function(e){ checkusername(e,5);,false);

21 事件对象案例 6: <script> function checklength(e, minlength) { // Declare function var el, elmsg; // Declare variables if (!e) { // If event object doesn't exist e = window.event; // Use IE fallback el = e.target e.srcelement; // Get target of event elmsg = el.nextsibling; // Get its next sibling if (el.value.length < minlength) { // If length is too short set msg elmsg.innerhtml = 'Username must be ' + minlength + ' characters or more'; else { // Otherwise elmsg.innerhtml = ''; // Clear message

22 事件对象案例 6: var elusername = document.getelementbyid('username');// Get username input if (elusername.addeventlistener) { // If event listener supported elusername.addeventlistener('blur', function(e) { // On blur event checklength(e, 5); // Call checklength(), false); // Capture in bubble phase else { // Otherwise elusername.attachevent('onblur', function(e) { // IE fallback onblur checklength(e, 5); // Call checklength() ); </script>

23 事件对象事件委托事件委托如果用户可以和页面中的大量元素进行交互, 比如 :UI 中的大量按钮, 一个很长的列表, 表格中的每一个单元格向这些元素中分别添加事件监听器就会使用大量内存, 从而降低性能事件可以影响到容器元素 ( 或祖先元素 ), 因此可以将事件处理程序放置在一个容器元素上, 然后使用事件对象的 target 属性找到它的后代中是哪一个发生了事件因此可以将事件监听器的工作委托给这些元素的父元素

24 事件对象改变默认行为 : 事件对象有一些方法可以改变一个元素的默认行为, 以及它的祖先元素如何对这个事件做出响应 preventdefault(): 有一些事件, 比如点击链接或者提交表单, 会把用户导向另一个页面为了阻止这类元素的这种默认行为, 可以使用事件对象的该方法 IE5-IE8 有个具有相同功能的属性 returnvalue if(event.preventdefault){ else{ event.preventdefault(); event.returnvalue=false;

25 事件对象改变默认行为 : 事件对象有一些方法可以改变一个元素的默认行为, 以及它的祖先元素如何对这个事件做出响应 stoppropagation(): 处理完某个元素上的事件之后, 可能需要阻止这个事件向其祖先元素继续冒泡传播, 使用事件对象的 stoppropagation() 方法在 IE8 和更早的版本的 IE 中, 使用拥有同样功能的属性 cancelbubble, 将其设置为 true 可以达到同样的效果 if(event.stoppropagation){ else{ event.stoppropagation(); event.cancelbubble=true;

26 事件对象改变默认行为 : 事件对象有一些方法可以改变一个元素的默认行为, 以及它的祖先元素如何对这个事件做出响应同时使用这两者在同样的场景下, 可能在某些函数中看到使用了下列的语句,return false; 这种方式既阻止了元素的默认行为, 也阻止了事件继续向上冒泡或向下传播, 它可以运行在所有浏览器中

27 事件对象事件代理举例 : <script> function gettarget(e){ if(!e){ e=window.event; return e.target e.srcelement; function itemdone(e){ var target,elparent; target=gettarget(e); elparent=target.parentnode; else{ e.returnvalue=false; var el=document.getelementbyid('liebiao'); if(el.addeventlistener){ el.addeventlistener('click',function(e){ itemdone(e);,false); else { el.attachevent('onclick',function(e){ itemdone(e); ); </script> elparent.removechild(target); if (e.preventdefault){ e.preventdefault();

28 事件类型用户界面事件用户界面事件 : 用户界面 (UI) 事件发生在用户与浏览器本身 ( 而不是其中的 HTML 界面 ) 进行交互的过程中, 例如当页面加载完成时, 或是浏览器窗口的大小发生变化时 UI 事件处理程序 / 监听器附加在浏览器窗口上事件触发 load 当 Web 页面加载完成时触发它同样可以用于其他元素节点的加载事件, 比如图片脚本或者对象 unload 当 Web 页面卸载时, 通常指因为请求了一个新页面的发生, 该事件会在用户离开页面之前触发 error 当浏览器遇到 JavaScript 错误或不存在的资源时触发 resize 当浏览器窗口改变大小时触发 scroll 当用户向上或向下滚动页面时触发它可以关联整个页面, 也可以关联页面中某些特定元素

29 事件类型案例 7: <body> <img src="images/7-07.jpg" name="img1" o n l o a d = " b l o w u p ( ) " o n m o u s e o v e r = " r e d u c e ( ) " alt="img1"> <script language="javascript"> var h=img1.height; var w=img1.width; function blowup(){// 缩小图片 if (img1.height>=h){ function reduce(){// 恢复图片的原始大小 if (img1.height<h){ img1.height=h; img1.width=w; </script> </body> img1.height=h*0.5; img1.width=h*0.5;

30 事件类型案例 8: <body onresize="alert('you have changed the size of the window')"> <p>try to resize the browser window.</p> </body>

31 事件类型表单事件表单事件 : 实际上就是对元素获得或失去焦点的动作进行控制可以利用表单事件来改变获得或失去焦点元素样式获得焦点和失去焦点事件获得焦点事件 (onfocus) 是当某个元素获得焦点时触发事件处理程序失去焦点事件 (onblur) 是当前元素失去焦点时触发事件处理程序在一般情况下, 这两个事件是同时使用的

32 事件类型案例 9: <tr> <td width="108"> 用户名 :</td> <td width="213"><form name="form1" method="post" action=""> < i n p u t t y p e = " t e x t " name="textfield" onfocus="txtfocus()" onblur="txtblur()"> </form></td> </tr> <script language="javascript"> function txtfocus(e){ var e=window.event; var obj=e.target e.srcelement; obj.style.background="#ffff66"; function txtblur(e){ var e=window.event; var obj=e.target e.srcelement; obj.style.background="#ffffff"; </script>

33 事件类型失去焦点内容改变事件 (onchange): 是当前元素失去焦点并且元素的内容发生改变时触发事件处理程序例如该事件在下拉文本框, 选中一个单选按钮时, 选中或取消一个复选按钮时

34 事件类型案例 10: <form name="form1" method="post" action=""> <input name="textfield" type="text" size="23"> < s e l e c t n a m e = " m e n u 1 " onchange="fcolor()"> <option value="black"> 黑 </option> <script language="javascript"> function Fcolor(){ var e=window.event; var obj=e.srcelement; form1.textfield.style.color= obj.options[obj.selectedindex].value; </script> <option value="yellow"> 黄 </option> <option value="blue"> 蓝 </option> <option value="green"> 绿 </option> <option value="red"> 红 </option> <option value="purple"> 紫 </option> </select> </form>

35 事件类型表单事件提交与重置事件表单提交事件 (onsubmit) 是在用户提交表单时 ( 通常使用提交按钮, 也就是将按钮的 type 属性设为 submit), 在表单提交之前被触发, 因此, 该事件的处理程序通过返回 false 值来阻止表单的提交该事件可以用来验证表单输入项的正确性表单重置事件 (onreset) 与表单提交事件的处理过程相同, 该事件只是将表单中的各元素的值设置为原始值一般用于清空表单中的文本框

36 事件类型案例 11: <form n a m e = " f o r m 1 " o n R e s e t = " r e t u r n A l l R e s e t ( ) " onsubmit="return AllSubmit()"> <script language="javascript"> function AllReset(){ if (window.confirm(" 是否进行重置?")) return true; else return false; function AllSubmit(){ var T=true; var e=window.event; var obj=e.srcelement; for (var i=1;i<=7;i++){ if (eval("obj."+"txt"+i).value==""){ T=false; break; if (!T){ alert(" 提交信息不允许为空 "); return T; </script>

37 事件类型鼠标事件鼠标点击事件鼠标点击事件包括单击 (click) 和双击 (dblclick) 单击事件 (onclick) 是在鼠标单击时被触发的事件单击是指鼠标停留在对象上, 按下鼠标键, 在没有移动鼠标的同时放开鼠标键的这一完整过程单击事件一般应用于 Button 对象 Checkbox 对象 Image 对象 Link 对象 Radio 对象 Reset 对象和 Submit 对象,Button 对象一般只会用到 onclick 事件处理程序, 因为该对象不能从用户那里得到任何信息, 如果没有 onclick 事件处理程序, 按钮对象将不会有任何作用

38 事件类型鼠标事件案例 12: <body> <script language="javascript"> var Arraycolor=new Array("olive","teal","red","blue","maroon","navy","lime","fuschia","green","purple","gray","yellow","aqua","white","silver"); var n=0;// 为变量赋初值 function turncolors(){// 自定义函数 if (n==(arraycolor.length-1)) n=0;// 判断数组指针是否指向最后一个元素 n++;// 变量自加 1 document.bgcolor = Arraycolor[n];// 设置背景颜色为对应数组元素的值 </script> <form name="form1" method="post" action=""> <p> <input type="button" name="submit" value=" 变换背景 " onclick="turncolors()"> </p> <p> 用按钮随意变换背景颜色.</p> </form> </body>

39 事件类型鼠标事件鼠标按下和松开鼠标的按下和松开事件分别是 onmousedown 和 onmouseup 事件其中, onmousedown 事件用于在鼠标按下时触发事件处理程序,onmouseup 事件是在鼠标松开时触发事件处理程序在用鼠标单击对象时, 可以用这两个事件实现其动态效果

40 事件类型鼠标事件案例 13: <body> <form name="form1" method="post" action=""> <p id="p1" style="color:#aa9900 " onmousedown="mousedown()" onmouseup="mouseup()"><u> 河南中医药大学 </u></p> </form> <script language="javascript"> function mousedown(){ var obj=document.getelementbyid('p1'); obj.style.color='#0022aa'; function mouseup(){ var obj=document.getelementbyid('p1'); obj.style.color='#aa9900'; window.open(" 河南中医药大学 ",""); </script> </body>

41 事件类型鼠标事件鼠标移入和移出事件鼠标的移入和移出事件分别是 onmouseover 和 onmouseout 事件其中,onmouseover 事件在鼠标移动到对象上方时触发事件处理程序, onmouseout 事件在鼠标移出对象上方时触发事件处理程序可以用这两个事件在指定的对象上移动鼠标时, 实现其对象的动态效果

42 事件类型鼠标事件鼠标移动事件鼠标移动事件 (onmousemove) 是鼠标在页面上进行移动时触发事件处理程序, 可以在该事件中用 document 对象实时读取鼠标在页面中的位置

43 事件类型键盘事件键盘事件包含 o n k e y p r e s s o n k e y d o w n 和 o n k e y u p 事件, 其中 onkeypress 事件是在键盘上的某个键被按下并且释放时触发此事件的处理程序, 一般用于键盘上的单键操作 onkeydown 事件是在键盘上的某个键被按下时触发此事件的处理程序, 一般用于组合键的操作 onkeyup 事件是在键盘上的某个键被按下后松开时触发此事件的处理程序, 一般用于组合键的操作

44 事件类型案例 14: <div id="page"> <h1>list King</h1> <form id="messageform"> <h2>my profile</h2> <textarea id="message"></textarea> <div id="charactersleft">180 characters</div> <div id="lastkey"></div> </form> </div> 键盘事件 var el; // Declare variables function charcount(e) { // Declare function var textentered, chardisplay, counter, lastkey; // Declare variables textentered = document.getelementbyid('message').value; // User's text chardisplay = document.getelementbyid('charactersleft'); // Counter element counter = (textentered.length); // Num of chars left chardisplay.textcontent = counter; // Show chars left lastkey = document.getelementbyid('lastkey'); // Get last key elem lastkey.textcontent = 'Last key in ASCII code: ' + e.keycode; // Create msg el = document.getelementbyid('message'); el.addeventlistener('keyup', charcount, false);

45 事件类型文本编辑事件文本编辑事件是指对浏览器中的内容进行选择复制剪切和粘贴时所触发的事件复制事件是在浏览器中复制被选中的部份或全部内容时触发事件处理程序, 复制事件有 onbeforecopy 和 oncopy 两个事件,onbeforecopy 事件是将网页内容复制到剪贴版时触发事件处里程序,oncopy 事件是在网页中复制内容时触发事件处里程序注意 : 必须在函数名前面加 return 语句否则, 当前事件返回的值一律是 true 值, 也是允许复制的例如 :<body oncopy= return p() > </body> <script> function p(){alert(' 该页面内容不允许复制 '); return false; </script> 即 :<body oncopy= return false > </body>

46 事件类型文本编辑事件剪切事件 : 是在浏览器中剪切被选中的内容时触发事件处理程序, 剪切事件有 onbeforecut 和 oncut 两个事件,onbeforecut 事件是当页面中的一部分或全部内容被剪切到浏览者系统剪贴板时触发事件处理程序,oncut 事件是当页面中被选择的内容被剪切时触发事件处理程序粘贴事件 : 粘贴事件 (onbeforepaste) 是将内容要从浏览者的系统剪贴板中粘贴到页面上时所触发的事件处理程序可以利用该事件避免浏览者在添写信息时, 对验证信息进行粘贴, 如密码文本框和确定密码文本框中的信息

47 事件类型文本编辑事件选择事件 : 选择事件是用户在 body input 或 textarea 表单区域中选择文本时触发事件处理程序选择事件有 onselect 和 onselectstart 两个事件 onselect 事件是当文本内容被选择时触发事件处理程序只能在相应的文本中选择一个字符或是一个汉字后触发本事件, 并不是用鼠标选择文本后, 松开鼠标时触发 onselectstart 事件是开始对本文的内容进行选择时触发事件处理程序在该事件中可以用 return 语句屏蔽文本的选择操作

48 事件类型文本编辑事件案例 15: <body> <form name="form1" method="post" action=""> <input name="textfield" type="text" onselect="return Tselect()" value="hello!javascript"> </form> <script language="javascript"> function Tselect(){ var txt=document.selection.createrange().text;// 获取当前所选中的文本 if (txt=="hello!"){ alert(" 你所选择的内容为 :"+txt); </script> </body>

49 事件类型事件变动任何时候当元素被添加到 DOM 中或从 DOM 中移除时,DOM 的结构就发生了变化, 而这种变化会触发变动事件事件触发 DOMNodeInserted 当一个节点被插入到 DOM 树中触发, 例如使用 appendchild() replacechild() 时 DOMNodeRemoved 当一个节点从 DOM 树中移除时触发, 例如使用 removechild() replacechild(). DOMSubtreeModified DOMNodeInsertedInt odocument 当 DOM 结构发生变化时触发, 它会在上述两个事件发生之后再触发当一个节点作为后代节点被插入到另一个已经存在于文档中的节点时触发 DOMNodeRemovedFr omdocument 当一个节点作为后代节点从另一个已经存在于文档中的节点移除时触发

50 事件类型案例 16 <body> <div id="page"> <h1>list King</h1> < h 2 > B u y G r o c e r i e s < s p a n id="counter">1</span></h2> <ul id="list"> <li>fresh figs</li> </ul> <div class="button"><a href="/additem" class="add">add list item</a></div> </div> <script> 事件变动 function additem(e) { // Declare function e.preventdefault(); // Prevent link action newel = document.createelement('li'); // New <li> element newtext = document.createtextnode('new list item'); // New text node newel.appendchild(newtext); // Add text to <li> ellist.appendchild(newel); // Add <li> to list function updatecount() { // Declare function listitems = ellist.getelementsbytagname('li').length; // Get total of <li>s counter.innerhtml = listitems; // Update counter addlink.addeventlistener('click', additem, false); // Click on button ellist.addeventlistener('domnodeinserted', updatecount, false); // DOM updated </script> var ellist, addlink, newel, newtext, counter, listitems; // Declare variables ellist = document.getelementbyid('list'); // Get list a d d L i n k = d o c u m e n t. q u e r y S e l e c t o r ( ' a ' ) ; // Get add item button counter = document.getelementbyid('counter');

51 事件类型 HTML5 事件有三个页面级的事件在 HTML5 版本的规范中被引入, 并且迅速变得流行起来事件 DOMContentLoaded hashchange beforeunload 触发当 DOM 树形成后触发 ( 与此同时, 图片 CSS 和 JavaScript 脚本可能还在加载 ) 在这个事件中, 脚本运行要早于 load 事件, 因为 load 事件会等待所有资源这种方式让页面看起来加载速度更快当 URL 的 hash 值变化时触发当页面被卸载之前在 window 对象上触发, 应该只用来帮助用户例如, 可以帮助用户知道在表单中修改了数据但是尚未保存

52 事件类型案例 17: <div id="page"> <h1>list King</h1> <h2>profile</h2> <script> function setup() { var textinput; textinput = document.getelementbyid('message'); textinput.focus(); HTML5 事件 <form id="messageform" action=" window.addeventlistener('domcontentloaded', setup, false); <textarea id="message"></textarea> <input type="submit" value="next" /> </form> </div> window.addeventlistener('beforeunload', function(event) { var message = 'You have changes that have not been saved'; (event window.event).returnvalue = message; return message; ); </script>

53 想一想制作一个简单的用户注册页面, 应用表单事件中的失去焦点事件判断用户输入的用户名和密码, 以及确认用户名和密码是否符合要求? 用户名 : 不能少于 3 个字符密码 : 不能少于 6 个字符确认密码 : 提交重置

PowerPoint 演示文稿

PowerPoint 演示文稿按钮对象 (button) 当 JavaScript 读到标记中的 type 属性值为 button 时, 自动建立一个按钮对象, 并将该对象放到表单对象的 elements 数组当中按钮对象包括 : 普通按钮 (button) 提交按钮 (submit) 重置按钮 (reset) 1. 使用按钮对象的格式 document.forms[ 索引值 ].elements[ 索引值