• javascript 事件对象


    1.事件对象
      用来记录一些事件发生时的相关信息的对象
      A.只有当事件发生的时候才产生,只能在处理函数内部访问
      B.处理函数运行结束后自动销毁
    2.如何获取事件对象
      IE: window.event
      FF: 对象.on事件 = function(e)

      通用法
      var ev = e || window.event
    3.事件对象的属性
     A.关于鼠标事件的事件对象
       相对浏览器位置
       clientX/clientY 当鼠标事件发生时,鼠标相对于浏览器的位置

     B.相对于屏幕位置的
       screenX/screenY 当鼠标事件发生时,鼠标相对于屏幕的位置

     C.相对于事件源的位置
       IE:
       offsetX/offsetY 当鼠标事件发生的时候,鼠标相对于事件源的位置
       FF:
       layerX/layerY   当鼠标发生时,鼠标相对于事件源的位置
    4.键盘事件的事件对象
      keyCode // 获取键盘码  空格:32 左上右下键码:37/38/39/40
      altKey/ctrlKey/shiftKey 判断相应的键是否是按下,true/false
      type // 用来检测事件的类型

    例子:

    <script>

    window.onload = function(){
     var but = document.getElementById("but");
     var divs = null;
     but.onclick = function(){
      if(divs != null){
       return;
      }
      divs = document.createElement("div");
      divs.style.width="300px";
      divs.style.height= "150px";
      divs.style.border = "4px solid red";
      divs.style.position = "absolute";
      var a = document.createElement("a");
      a.innerHTML = "X";
      a.style.styleFloat = "right";
      a.style.cursor = "pointer";
      divs.appendChild(a);
      document.body.appendChild(divs);

      a.onclick = function(){
       document.body.removeChild(divs);
       divs = null;
      }

      divs.onmousedown = function(e){
       var ok = true;
       var ev = e || window.event;
       var ox = ev.offsetX || ev.layerX;
       var oy = ev.offsetY || ev.layerY;
       this.onmousemove = function(ee){
        if(!ok){
         return;
        }
        var eev = ee || window.event;
        var cx = eev.clientX;
        var cy = eev.clientY;
        this.style.left = cx-ox+"px";
        this.style.top = cy-oy+"px";
       }
       this.onmouseup = function(){
        if(ok){
         ok = false;
        }
       }
      }  

     }
    }
    </script>

  • 相关阅读:
    sed cat 命令
    Datetime 时间模块求日期差
    Selenium:截图显示等待
    SAS常用函数
    SAS笔记
    python 简明教程 【转】
    numpy 笔记
    android Adapter使用详解
    Eclipse的使用技巧之eclipse里的查找:
    Hierarchy Viewer之官方文档翻译之中英对照之未完不续版之使用详解.
  • 原文地址:https://www.cnblogs.com/lin3615/p/3189741.html
Copyright © 2020-2023  润新知