zoukankan      html  css  js  c++  java
  • JavaScript之事件总结

           上篇已经介绍了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设计。所以,虽然事件中更多的是为了实现某个功能,得到用户所需的信息,但是也必须考虑周全,尽可能在获取所需信息的同时,能够给用户一个舒适的体验度。对这部分的学习还需继续。。。

  • 相关阅读:
    深入浅出Tomcat/2
    深入浅出Tomcat/1- 来历和配置文件
    深入浅出:HTTP/2
    深入浅出:5G和HTTP
    深入浅出:远离法律风险,必须了解开源项目许可证
    深入浅出经典面试题:从浏览器中输入URL到页面加载发生了什么
    深入浅出经典面试题:从浏览器中输入URL到页面加载发生了什么
    深入浅出经典面试题:从浏览器中输入URL到页面加载发生了什么
    一个微信群的现状
    Hbase原理、基本概念、基本架构
  • 原文地址:https://www.cnblogs.com/victor-grace/p/7253793.html
Copyright © 2011-2022 走看看