《HTML5与JavaScrip程序设计》项目六 JavaScript事件 教学课件.pptVIP

03知识链接3.event.preventDefault()和event.cancelable在html的超链接元素上，如果指定了href属性，当点击该超链接的时候，默认就会跳转到相应的目标地址，我们可以通过使用事件的preventDefault()函数来取消这中默认的跳转行为。04任务实施!DOCTYPEhtmlhtml head metacharset=utf-8 titletask06-2/title style #clock{ font:bold24pxsans; background-color:#ddf; color:brown; padding:10px; border:solidblack2px; border-radius:10px; } /style /head 04任务实施 body h1电子时钟/h1 spanid=clockid=clock/spanbrbrbr scripttype=text/javascript functiondisplayTime(){ varelt=document.getElementById(clock); varnow=newDate(); elt.innerHTML=now.toLocaleTimeString(); setTimeout(displayTime,1000); } varclock=document.getElementById(clock); 04任务实施 functionhandler(event){ switch(event.type){ caseclick: alert(今天的日期是：+newDate().toDateString()) break; casemouseover: event.target.style.backgroundColor=yellow break; casemouseout: event.target.style.backgroundColor=; break; } } clock.onclick=handler; clock.onmouseover=handler; clock.onmouseout=handler; window.onload=displayTime; /script /body/html04任务实施05思考与练习1.如何在事件处理函数中得到是什么事件触发了？2.在什么情况下，事件处理函数中this和event.target一致？05思考与练习打开前端开发工具HBuilder，在项目subject06中新建一个HTML文件：exercise06-2.html。在页面上的input输入框中，输入某个字符，页面上对于的字符按钮就会点亮，松开后，就恢复。最终显示效果如图6-7所示：图6-7exercise06-2运行结果项目六JavaScript事件任务一事件处理任务二事件对象任务三事件分类01在生活中，我们经常会用到快递，快递已经成为我们生活中很重要的一部分。无论是寄快递，还是收快递，我们都会查询快递的信息。当我们在查询快递信息的时候，在输入单号的方框上方经常会放大显示输入的内容，以便让我们能看清楚自己输入的内容，要实现这样的效果，需要用到几种事件。这一个任务，我们就来学习一下怎样实现这个功能。完成任务任务描述能了解事件类型，并知道每个类型的特点。能将每一种事件应用到实例中。能将每一种事件应用到实例中。能力目标知识目标学习目标思政目标培养学生善于思考的能力，能将所学应用到日常生活中。03知识链接用户界面事件或UI事件不一定跟用户操作有关。这类事件在DOM规范出现之前就已经以某种形式存在了，保留它们是为了向后兼容。UI事件主要有以下几种：1.load事件在window上当页面加载完成后触发，在窗套（frameset）上当所有窗格（frame）都加载完成后触发，在img元素上当图片加载完成后触发，在object元素上当相应对象加载完成后触发。load事件可能是JavaScript中最常用的事件。在window对象上，load事件会在整个页面（包括所有外