zoukankan      html  css  js  c++  java
  • 关于JavaScript的事件

         刚刚学习Javascript的事情,我不明白这是什么东西。书中是这样说的,所有事件都以对象存在。但我还是不明白,学习事件到底可以干什么,不要问为什么,没有的一本书会告诉你。(自小教导学习从来没有问有什么用的)不过凭常识可以知道,像click,mouseover这些都是事件。在IE中,事件对象是window对象的一个属性:event。但是标准的DOM中获取事件对象却与IE不同,从各大搜索引擎可以知道。

    我做了一个很小的例子:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    
    <head>
        <title>An XHTML 1.0 Strict standard template</title>
        <meta http-equiv="content-type"    content="text/html;charset=gbk" />
        <script type="text/javascript">
         function onClick(e){
          e = e || window.event;//兼容事件
          target = document.getElementById("foo");
          var obj = target.getAttribute('title');
          alert(obj);
         }
         window.onload=function(){
         var d = document.getElementById("foo");
         d.onclick = onClick; //响应的函数
         }
        </script>
    </head> 
    
    <body> 
    
         <div id="foo" title="testing...">Hello,Wolrd!</div> 
    
    </body>
    </html>

         这跟平常的有什么不同,它可以完成什么重要工作?在初级阶段,我还是不懂。下面还有一个例子,可以让我觉得怎么像是监听事件。只不过可以判断出事件的类型,难道这就是它的用处?

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    
    <head>
        <title>An XHTML 1.0 Strict standard template</title>
        <meta http-equiv="content-type"    content="text/html;charset=gbk" />
        <script type="text/javascript">
        function handle(e){
         var oDiv = document.getElementById("foo2");
        e = e || window.event;
         if (e.type == "click") {
            oDiv.innerHTML+="点击了!";
         }else if(e.type == "mouseover"){
            oDiv.innerHTML+="你在我上面移过。";
         }
        }
        window.onload=function(){
          var oDiv = document.getElementById("foo1");
          oDiv.onclick=handle;
          oDiv.onmouseover=handle;
        }
        </script>
    </head> 
    
    <body>
    <div id="foo1" style="margin:0 auto;600px;height:300px;border:1px solid #aaa;text-align:center">鼠标单击和移过</div>
    <div id="foo2"></div> 
    
    </body>
    </html>
  • 相关阅读:
    Gretna2.0 使用过程中遇到的问题
    在外星人电脑上安装windows10和ubuntu16.04双系统小记
    Mac OS下PHP开发环境的搭建——基于XAMPP和IntelliJ IDEA
    在Kali上安装打印机
    Rails中关联数据表的添加操作(嵌套表单)
    痛苦的人生——JRuby on Rails的开发与部署小记
    Word技巧杂记(二)——批量修改修订格式并接受
    Ruby学习(三)——类与对象(1)
    Ruby学习笔记(二)——从管道读取数据
    Word技巧杂记(一)——去掉页眉上方的黑线
  • 原文地址:https://www.cnblogs.com/coolicer/p/1833438.html
Copyright © 2011-2022 走看看