成果js04-处理与对象lamp cjavascript05.pptx

JS04-事件处理与BOM对象主讲:邮箱:微博:

课前复习对象的基本操作for…in，with语法的使用JavaScript内置对象

预习检查JavaScript事件的组成部分常用的JS事件什么是BOMwindow对象的子对象

本章内容1.事件驱动与事件处理2.常用的事件3.JavaScript的对象层次4.BOM-浏览器对象模型5.window对象6.window对象的子对象

1.事件驱动与事件处理当文档或文档中的元素发生了某些动作时，浏览器就会产生一个事件。JavaScript程序员可以事先定义好一个事件的处理程序，一旦浏览器中产生了某个事件，浏览器就会自动调用该处理程序。这种通过事件来调用程序的方式称为事件驱动。JavaScript是基于对象采用的事件驱动。事件中的三要素：事件源、事件、事件处理。

设置对象事件的方法1.在HTML元素属性中设置对象事件inputtype=“button”value=“按钮”onclick=“btclick()”2.在JavaScript代码中设置对象事件scriptdocument.forms[0].elements[0].onclick=“alert(‘button’)”;/script

显示调用事件处理程序formname=“myform”inputtype=“button”value=“提交”onclick=“btclick()”/formscript functionbtclick(){ alert(‘您单击了按钮’); } document.forms[0].elements[0].onclick();/script

2.常用事件事件名称说明支持元素load浏览器加载一个窗口或框架集中的所有框架BODY、FRAMESETunload浏览器从窗口或框架中卸载文档BODY、FRAMESETclick单击鼠标，指按下并释放鼠标键大多数元素dbclick双击鼠标大多数元素mousedown按下鼠标键（并没有释放）大多数元素mouseup释放鼠标键大多数元素

2.常用事件事件名称说明支持元素mouseover移动鼠标到对象上大多数元素mousemove移动鼠标大多数元素mouseout鼠标从对象上移开大多数元素focus对象得到焦点A、AREA、LABEL、INPUT、SELECT、TEXTAREA、BUTTONblur对象失去焦点A、AREA、LABEL、INPUT、SELECT、TEXTAREA、BUTTONkeypress按下并释放键盘键大多数元素

2.常用事件事件名称说明支持元素keydown按下键盘键大多数元素keyup释放键盘键大多数元素submit提交表单FORMreset重新设置表单FORMselect选中文本INPUT、TEXTAREAchange值产生改变INPUT、SELECT、TEXTAREA

事件处理程序的返回值在JavaScript中并不要求处理程序有返回值。如果事件处理程序没有返回值，浏览器就会以默认情况进行处理。但是，在很多情况下程序都要求事件处理程序要有一个返回值，通过该返回值来判断事件处理程序是否正确处理，或者通过该返回值来判断是否进行下一步操作。在这种情况下，事件处理程序返回值都为布尔值，如果为false则阻止浏览器的下一步操作，如果为true则进行默认的操作。

事件处理程序的返回值

事件处理程序的返回值本例的关键知识点如下：1.在网页中添加了一个文本框，一个密码框和一个提交按钮2.在form元素中设置了onsubmit属性，其属性值为”returnformsubmit()”3.注意onsubmit属性的属性值不是”formsubmit()”，而是”returnformsubmit()”，这说明要获取formsubmit()函数的返回值，如果返回值为false则阻止提交表单。

事件处理程序的返回值4.在formsubmit()函数中，使用document.forms[0].elements.length语句得到网页中第一个表单中的元素数量。5.通过for循环语句来判断是不是所有的文本框都输入了内容。for语句中formLength-1的结果为2，因为第三个表单元素为提交按钮，不需要进行判断。6.如果formsubmit()函数返回false则阻止提交表单，否则就提交表单。

事件与this运算符由于事件通常会调用一个函数，因此在函数体中处理数据时，常常需要用到一些与对象相关的参数，此时就可以通过this运算符来传递参数，this运算符代表的是对象本身。inputtype=‘button’onclick=“myfun(this)”/script functionmy