人机交互界面设计第九章 JavaScript应用.pptVIP

人机交互界面设计第九章JavaScript应用

目录01事件02对象01-01click事件01-02mouseover与mouseout事件01-03focus与blur事件01-04change事件01-05其他事件02-01时间类Date02-02数组类Array02-03数学类Math02-04对象类Object02-05窗口类Window

01事件事件事件〔Event〕是JS中很常用的一种代码触发机制，而事件〔Event〕这个词来源于新闻界。生活中，每一次的新闻事件发生都会引发人们的广泛关注。那么JS中的事件我们可以理解为：每一次JS事件的发生，都可以触发代码的运行。只是一局部JS事件是人为的，比方点击、鼠标按下、鼠标移动等等，而一局部事件是页面产生的，比方页面的图像加载事件，AJAX中的状态改变事件等等。

Div中有一些文字，点击后更改div标签的内容。源代码如下：divonclick=this.innerHTML=你点击了我!请点击该文本/div案例操作一01事件click事件标签中的onclick是触发click事件的事件句柄。当中的on，可以理解为“当……时候〞。Onclick就是“当鼠标点击的时候〞。“Onlick〞写在了标签里，是属于HTML的〔事件句柄〕属性，因此“onclick〞，可以大写，也可以小写〔HTML属性名是不分大小写的〕，比方写成onClick，或者ONCLICK都没有问题。

Div中有一些文字，点击后更改div标签的内容。源代码如下：divonclick=this.innerHTML=你点击了我!请点击该文本/div案例操作一01事件click事件等号〔=〕之后的引号(“〞)，里面就是点击后要执行的代码。因为在外部使用了双引号〔“〞〕，因此里面的字符串‘你点击了我！’使用的是单引号〔‘’〕。this，是JS中的特殊对象，在这里特指鼠标点击的“这个〞标签div。这段代码的作用就是，用户点击div后，这个div之间的内容就更改为“你点击了我！〞。

考虑到点击之后，要执行的代码可能很多，如果全部写在了标签上，不利于代码的维护。所以，事件往往跟函数结合在一起。源代码如下：divonclick=changeHTML()请点击该文本/divscriptfunctionchangeHTML(){ event.target.innerHTML=你点击了我!;}/script案例操作二01事件click事件

Onclick之后调用的代码是一个函数changeHTML〔〕，我们要执行的代码都写在这个函数之中。这么做的目的是，便于代码的优化和管理。这个函数因为写在了事件中，因此，也被称为事件函数。Event是事件对象。每个事件，在它调用的事件函数中，都可以使用事件对象，事件对象就是指触发代码运行的这个事件。Target是事件对象的属性，表示触发此事件的元素。在这里就是指我们点击的div标签。不过，在IE10及其以下版本中，使用srcElement来替代target〔必威体育精装版的IE11和Edge浏览器已经使用了标准的target属性〕。案例操作二01事件click事件

divid=mydiv请点击该文本/divscriptvarmydiv=document.getElementById(mydiv);//通过ID获取标签functionchangeHTML(){ vart=(event.target)?event.target:event.srcElement; t.innerHTML=你点击了我!;}mydiv.onclick=function(){ changeHTML();}/script案例操作三01事件click事件

我们给标签定义了一个id，通过这个id去获取标签，并把获取的标签存储在变量mydiv中。mydiv.onclick=function(){},就是在调用事件函数。点击后执行的代码都写在了function(){}里面。值得注意的是，这里的onclick是写在了script中，是JS的一局部。而JS是严格区分大小写的，这里写成mydiv.onClick=function(){}是不行的，因为JS中的事件函数都是小写的。这种方法剥离了页面标签和JS代码，做到了结构〔HTML〕和行为〔JS〕的别离，利于代码的维护和扩展，是我们所提倡的一种方式。但是在实际的开发中，我们往往根据需要，以上3种方法中任选一种适宜的方法就可以了。案例操作三01事件click事件

Mouseover事件是鼠标〔mouse〕移动到标签之上〔over〕触发的。Mouseover事件01事件mouseover与m