JavaScript前端开发程序设计教程 第2版 实训指导.pdfVIP

实训案例名称：XXX 一、实训目的 1. 掌握事件驱动及事件绑定的分类和方法 2. 掌握onload 事件的方法及应用 3. 掌握Event 事件的属性和方法 4. 掌握事件流的概念和运用 二、实训内容 1. 在HTML 页面上绑定显示问候语的按钮 2. 通过onload 事件实现在页面中载入函数 3. 编写脚本，实现将页面上调用的事件名称显示在状态栏中 4. 在页面上实现阻止事件的默认行为 三、实训仪器、设备 装有Dreamweaver CS6 软件的电脑，网络畅通。 四、实训步骤 1. 在HTML 页面上绑定显示问候语的按钮 head meta http-equiv=Content-Type content=text/html; charset=utf-8 / title动态绑定事件/title script type=text/javascript function hello() { alert(您好!); } /script /head body p button id=hello_button name=Abutton1问侯/button /p script type=text/javascript hello_button.onclick = hello; //动态绑定 /script /body 2. 通过onload 事件实现在页面中载入函数 head meta http-equiv=Content-Type content=text/html; charset=utf-8 / titleonload 事件/title script type=text/javascript function hello1() { alert(您好!); } function hello2() { alert(您好!--来自第2 个事件处理函数); } function hello3() { alert(您好!--来自第3 个事件处理函数); } function start() {//要绑定到 onload 事件的函数 hello_button.onclick=hello1;//绑定第1 个函数 hello_button.attachEvent(onclick,hello2);//绑定第2 个函数 hello_button.attachEvent(onclick,hello3);//绑定第3 个函数 } /script /head body onload=start() p button id=hello_button name=Abutton1问侯/button /p /body 3. 编写脚本，实现将页面上调用的事件名称显示在状态栏中 head meta http-equiv=Content-Type content=text/html; charset=utf-8 / title显示事件名称/title script type=text/javascript function showEventName() { window.status = window.event.type; //将事件名显示在状态栏中 } /script /head body p onmousedown=showEventName() onmouseup=showEventName()请对本 段文字按下鼠标左键,再松开。期间，状态栏将依次显示事件名 mousedown、 mouseup。 /p /body 4. 在页面上实现阻止事件的默认行为 head meta http-equiv=Content-Type content=text/html; charset=utf-8 / title阻止事件的默认行为/title script type=text/javascript function preventLink() { if(event.srcElement.tagN