上篇已经介绍了DOM机制,主要是针对web页面结构及样式的设计。但是有了良好的界面设计还不够,还需要实现网页与用户的交互。我们的最终目的还是为用户服务,所以就需要用户来访问及操作web页。这就涉及到另一个概念:事件。

    JavaScript事件是由访问Web页面的用户引起的一些列操作,比如用户点击。只有用户执行了某项操作之后才会去执行对应的代码。这部分的主要内容如下:

 

    在事件模型中,内联模型是最传统的处理方法,事件处理函数作为HTML标签的一个属性来处理指定的事件,它一般都是与HTML混写,例如:

 

<input type="button" value="按钮"  onclick="alert('wang');" />

    而脚本模型则可以实现HTML与JavaScript代码层进行分离,例如:

      HTML部分:

        

<input type="button" value="按钮"/>

     JavaScript部分:

       

        var input=document.getElementsByTagName('input')[0];
        input.onclick=function(){
           alert('wang');
        }

    虽然脚本模型实现了HTML与JavaScript的分离,但是随着我们使用的次数、复杂度的增加,这种模型也存在着许多问题,事件之间的覆盖问题、可读性以及this传递等问题。

    这时就用到了DOM2模型,处理函数中的类型2也主要针对该模型进行使用。无论哪种模型,都需要使用事件处理函数来实现用户操作与代码之间的绑定,一般涉及到的事件是鼠标和键盘,用户通过鼠标和键盘操作类提交自己的需求,而操作的背后就是依据通过事件处理函数所获取的对象中包含的内容进行处理,得到用户所需要的内容。

    通过这些事件处理,可以实现对用户操作进行处理,得到用户所需要的信息。这部分的实现,才真正实现了与用户的交互。在这个过程中,我们需要注意的问题主要有:浏览器的兼容问题,对于不同的浏览器及相同浏览器的不同版本,我们需要进行兼容设置,这也是为什么处理函数中的类型2分为W3C和IE。

 

  总结:

     一个能够得到用户喜爱的网站,其良好的界面设计与功能是必不可少的,这正是我们一直在接触的UI设计。所以,虽然事件中更多的是为了实现某个功能,得到用户所需的信息,但是也必须考虑周全,尽可能在获取所需信息的同时,能够给用户一个舒适的体验度。对这部分的学习还需继续。。。

 posted on 2015-06-21 09:32  走出自己的未来  阅读(99)  评论(0编辑  收藏  举报