人机交互界面设计第九章_JavaScript应用教材教学课件.pptVIP

人机交互界面设计 第九章 JavaScript应用 目录 01事件 02 对象 01-01 click事件 01-02 mouseover与mouseout事件 01-03 focus与blur事件 01-04 change事件 01-05 其他事件 02-01 时间类Date 02-02 数组类Array 02-03 数学类Math 02-04 对象类Object 02-05 窗口类Window 01事件 事件 事件（Event）是JS中很常用的一种代码触发机制，而事件（Event）这个词来源于新闻界。生活中，每一次的新闻事件发生都会引发人们的广泛关注。那么JS中的事件我们可以理解为：每一次JS事件的发生，都可以触发代码的运行。只是一部分JS事件是人为的，比如点击、鼠标按下、鼠标移动等等，而一部分事件是页面产生的，比如页面的图像加载事件，AJAX中的状态改变事件等等。 Div中有一些文字，点击后更改div标签的内容。 源代码如下： div onclick=this.innerHTML=你点击了我!请点击该文本/div 案例操作一 01事件 click事件 标签中的onclick是触发click事件的事件句柄。当中的on，可以理解为“当……时候”。Onclick就是“当鼠标点击的时候”。 “Onlick”写在了标签里，是属于HTML的（事件句柄）属性，因此“onclick”，可以大写，也可以小写（HTML属性名是不分大小写的），比如写成onClick，或者 ONCLICK都没有问题。 Div中有一些文字，点击后更改div标签的内容。 源代码如下： div onclick=this.innerHTML=你点击了我!请点击该文本/div 案例操作一 01事件 click事件 等号（=）之后的引号(“”)，里面就是点击后要执行的代码。因为在外部使用了双引号（“”），因此里面的字符串‘你点击了我！’使用的是单引号（‘’）。 this，是JS中的特殊对象，在这里特指鼠标点击的“这个”标签div。 这段代码的作用就是，用户点击div后，这个div之间的内容就更改为“你点击了我！”。 考虑到点击之后，要执行的代码可能很多，如果全部写在了标签上，不利于代码的维护。所以，事件往往跟函数结合在一起。 源代码如下： div onclick=changeHTML( )请点击该文本/div script function changeHTML(){ event.target.innerHTML=你点击了我!; } /script 案例操作二 01事件 click事件 Onclick之后调用的代码是一个函数changeHTML（），我们要执行的代码都写在这个函数之中。这么做的目的是，便于代码的优化和管理。这个函数因为写在了事件中，因此，也被称为事件函数。 Event是事件对象。每个事件，在它调用的事件函数中，都可以使用事件对象，事件对象就是指触发代码运行的这个事件。 Target是事件对象的属性，表示触发此事件的元素。在这里就是指我们点击的div标签。不过，在IE10及其以下版本中，使用srcElement来替代target（最新的IE11和Edge浏览器已经使用了标准的target属性）。 案例操作二 01事件 click事件 div id=mydiv请点击该文本/div script var mydiv = document.getElementById(mydiv); //通过ID获取标签 function changeHTML(){ var t =(event.target) ? event.target : event.srcElement; t.innerHTML=你点击了我!; } mydiv.onclick = function(){ changeHTML(); } /script 案例操作三 01事件 click事件 script function changeBgRed(){ var t = event.target?event.target:event.srcElement; t.style.background=#f00 } function changeBgNone(){ var t = event.target?event.target:event.srcElement; t.style.background=none; } /script 我们继续改进上一个案例，让鼠标离开后背景色消失 01事件 Mouseover事件 Focus（聚焦）事件是针对表单元素，如文本框、文本域、按钮等等，当光标聚焦在上面的时候触发的。 focus事件 01事件 focus与blur事件