第0章 JavaScript事件处理及DOM.pptVIP

本节目标了解JavaScript事件含义掌握JavaScript常用事件掌握JavaScript事件绑定了解Dom的含义掌握Dom的操作方法什么是事件JavaScript脚本中的事件是指用户载入目标页面直到该页面被关闭期间浏览器的动作及该页面对用户操作的响应。事件的复杂程度大不相同，简单的如鼠标的移动、当前页面的关闭、键盘的输入等，复杂的如拖曳页面图片或单击浮动菜单等。事件处理器是与特定的文本和特定的事件相联系的JavaScript脚本代码，当该文本发生改变或者事件被触发时，浏览器执行该代码并进行相应的处理操作，而响应某个事件而进行的处理过程称为事件处理。JavaScript处理事件过程JavaScript处理事件的过程分为两个步骤：定义脚本可以处理的事件提供将这些事件连接到用户提供的JavaScript代码的标准方法JavaScript常用事件Html事件标记类型标记列表事件触发模型简要说明链接Aonclick鼠标单击链接onmMouseOut鼠标移出链接所在的位置onmouseOver鼠标经过链接所在的位置文档主体BODYonblur文档正文失去焦点onclick在文档正文中单击鼠标表单FORMonreset表单复位onsubmit提交窗体里的表单按钮INPUTTYPE=“button”/onclick鼠标在按钮响应范围单击复选框或单选按钮INPUTTYPE=“checkbox”/or‘radio’onclick鼠标单击复选框（或单选框）onfocus复选框（或单选框）得到焦点复位按钮提交按钮INPUTTYPE=resetorsubmitonfocusonclick鼠标单击复位（或确认）按钮文本字段INPUTTYPE=textonblur文本框失去当前输入焦点onchange文本框内容发生改变并且失去当前输入焦点onselect选择文本框中的文本选项SELECTonchange选择元素内容发生改变且失去当前输入焦点JavaScript常用事件JavaScript浏览器事件onload:浏览器载入文档事件onunload:关闭该文档事件onblur:浏览器失去焦点事件onfocus:获得焦点事件JavaScript事件处理HTML文档将元素的常用事件,如onclick、onmouseover等,当作属性捆绑在HTML元素上，当该元素的特定事件发生时，对应于此特定事件的事件处理器就被执行，并将处理结果返回给浏览器。事件捆绑导致特定的代码放置在其所处对象的事件处理器中。请实现功能：文档加载完毕时弹出对话框提示“文档加载完毕”JavaScript事件处理匿名函数JavaScript事件处理其他书写方式htmlheadtitle第一个JavaScript事件/title scripttype=text/javaScript functionshowMessage(){ alert(文档加载完毕！); } /script/headbodyonload=showMessage();/body/html定义函数showMessage调用函数showMessageJavaScript事件处理其他书写方式functionshowMessage(){//显式定义一个函数以备调用 alert(文档已经加载完毕！); }//此处应该省略函数小括号window.onload=showMessage;调用函数showMessage推荐使用js脚本和html文档分离的模式事件应用-按钮单击事件调用方式：inputtype=buttonvalue=按钮1onclick=showValue(this);/inputtype=“button”value=“按钮2”onclick=“showValue(this);”/inputtype=buttonvalue=按钮3onclick=showValue(this);///定义函数showValue并接受一个按钮对象参数functionshowValue(btn){ alert(btn.value);}定义函数showValue传入this代表当前按钮对象事件应用-文本框光标事件//这里需保证页面文档加载完毕，否则无法取得文本框对象window.onload=function(){ //通过document.getElementById函数获取文本框对象 var