Lesson6文档对象模型与事件驱动.doc

Lesson 6 文档对象模型与事件驱动一、认识文档对象模型 文档对象模型以对象形式描述HTML页面和Web浏览器的层次结构。 通过访问或设置文档对象模型中对象的属性并调用其方法，可以使程序按照一定的方式显示Web页面，并且与用户的动作进行交互。 文档对象模型如下图： 二、引用文档对象模型中的对象 所有下层对象都是其上层对象的子对象。而子对象其实就是父对象的属性，所以引用子对象的方式，与引用对象的一般属性是相同的。如： window.document.write(Hello); 由于window对象是默认的最上层对象，因此引用它的子对象时，可以不使用window： document.write(Hello); 当引用较低层次的对象时，要根据对象的包含关系，一层一层地引用对象。如： document.form1.yourname三、事件驱动1、事件驱动的基本概念 在图形界面的环境下，用户操作鼠标或按键的动作以及系统操作如载入页面等称为事件。如单击超链接或按钮时，就产生一个单击(click)事件；当载入一个页面时，就会发生载入(load)事件；等等。 用户操作事件或系统操作事件引起一连串程序动作的执行方式，称为事件驱动。为了响应某个事件而进行的处理过程，称为事件处理。对事件进行处理的程序或函数，称为事件处理程序。 浏览器在程序运行的大部分时间都在等待交互事件的发生，并在事件发生时，自动调用、执行事件处理程序。 在JavaScript中，对事件的处理通常由函数来完成。另外，一段代码也可以作为事件处理程序。 2、JavaScript的常用事件 绝大多数浏览器内部对象都拥有很多事件，表7-1列出了常用事件与对象的对应关系。 如果HTML标记或程序为某个对象设置了事件处理程序，系统会自动捕捉发生在此对象上的这种事件，并触发所定义的事件处理程序。(注：系统对每个事件都会有一个默认的处理动作，如对于超链接上的单击事件onclick,它将引导浏览器显示链接的页面。如果在JavaScript中没有对事件进行特殊处理，浏览器将保持它的默认行为。) 在JavaScript中，除了属性和方法之外，事件也是对象的重要组成部分。 四、处理事件1、 使用事件的方法 有两种方法:.通过HTML标记使用事件 许多HTML标记允许加上以事件名为名的属性，如： 如果触发事件时要执行的语句比较多，则可以在事件属性中写入函数调用的语句： .通过JavaScript代码使用事件 使用JavaScript语句： 对象.事件 = 函数名 把对象所拥有的事件当成一个属性，可以被赋值。如： document.form1.hello_button.onclick=hello;2、使用制作工具自动生成事件处理函数的模板五、使用事件（Event）对象 通过Event对象，可以访问键盘按键、鼠标动作等事件的状态。 Event对象是window对象的子对象，可以在事件处理程序中直接使用。属性说明altKey指示ALT键的状态，当ALT键按下时为真ctrlKey指示CTRL键的状态，当CTRL键按下时为真shiftKey指示SHIFT键的状态，当SHIFT键按下时为真button指示哪一个鼠标键被按下(0无、1左、2右、4中)offsetX鼠标光标相对于事件所在对象的相对水平位置offsetY鼠标光标相对于事件所在对象的相对垂直位置screenX返回相对于屏幕的X坐标值scree