zoukankan      html  css  js  c++  java
  • 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>

  • 相关阅读:
    国内外常用学术论文搜索网站
    2019年全国高校sql数据库
    Flask无法访问(127.0.0.1:5000)的问题解决方法
    Windows终端命令行工具Cmder
    JQuery实现密码可见不可见
    区块链最大的难题及其解决方案
    python 下载 进度条
    centos 用docker 运行 cypress
    通过 centos Nginx 查看html (为后续 服务器生成html 方便访问)
    odoo 分享 PostgreSQL 语句2
  • 原文地址:https://www.cnblogs.com/lin3615/p/3189741.html
Copyright © 2011-2022 走看看