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>

javascript 事件对象的更多相关文章

  1. 第一百二十节,JavaScript事件对象

    JavaScript事件对象 学习要点: 1.事件对象 2.鼠标事件 3.键盘事件 4.W3C与IE JavaScript事件的一个重要方面是它们拥有一些相对一致的特点,可以给你的开发提供更多的强大功 ...

  2. JavaScript事件对象与事件处理程序

    在学习之前建议请看一下事件流.事件冒泡.事件捕获 一.事件对象 事件对象:在DOM触发事件时,会产生一个事件对象event,这个事件对象包含着所有与事件相关的信息.既然event是事件对象,那么它必然 ...

  3. JavaScript事件对象

    一. 事件对象 事件处理三部分组成:对象.事件处理函数=函数.例如:单击文档任意处. 1.鼠标按钮 非 IE(W3C)中的 button 属性 0 表示主鼠标按钮(常规一般是鼠标左键) 1 表示中间的 ...

  4. JavaScript事件对象【转】

    一. 事件对象 事件处理三部分组成:对象.事件处理函数=函数.例如:单击文档任意处. 1.鼠标按钮 非 IE(W3C)中的 button 属性 0 表示主鼠标按钮(常规一般是鼠标左键) 1 表示中间的 ...

  5. Javascript 事件对象(二)event事件

    Event事件: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" ...

  6. JavaScript事件对象与事件的委托

    事件对象 包含事件相关的信息,如鼠标.时间.触发的DOM对象等 js默认将事件对象封装好,并自动的以参数的形式,传递给事件处理函数的第1个参数,如下: document.getElementsByTa ...

  7. JavaScript 事件对象event

    什么是事件对象? 比如当用户单击某个元素的时候,我们给这个元素注册的事件就会触发,该事件的本质就是一个函数,而该函数的形参接收一个event对象. 注:事件通常与函数结合使用,函数不会在事件发生前被执 ...

  8. JavaScript事件对象属性e.target和this的区别

    前言: Event对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置.鼠标按钮的状态. 事件发生后,跟事件相关的一系列信息数据的集合都放到这个对象里面,这个对象就是事件对象eve ...

  9. Javascript 事件对象进阶(二)拖拽的应用 - 登录框的拖拽

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

随机推荐

  1. 第二步 在D2RQ平台上配置jena环境

    第二步 在D2RQ平台上配置jena环境 2013年10月16日 9:48:53 搞了这么长时间语义,只用过protege这样的工具,一直没有落实到实际代码上.jena也看过好久了,总认为是hp公司的 ...

  2. Matlab 如何绘制复杂曲线的包络线

    Matlab 如何绘制复杂曲线的包络线 http://jingyan.baidu.com/article/aa6a2c14d36c710d4c19c4a8.html 如果一条曲线(比如声音波形)波动很 ...

  3. SAP生产订单状态

    SAP系统的常见订单状态如下: ·        CRTD (创建):标识生产订单刚刚创建,此时禁止做后续发料和报工确认等操作: ·        PREL (部分下达):当生产订单部分下达时,如仅下 ...

  4. ubuntu压缩解压

    ubuntu安装解压rar   一般通过默认安装的ubuntu是不能解压rar文件的,只有在安装了rar解压工具之后,才可以解压.其实在ubuntu下安装rar解压工具是非常简单的,只需要两个步骤就可 ...

  5. 算法基础:最大递减数问题(Golang实现)

    给出一个非负整数,找到这个非负整数中包括的最大递减数.一个数字的递减数是指相邻的数位从大到小排列的数字. 如: 95345323,递减数有:953,95,53,53,532,32, 那么最大的递减数为 ...

  6. Android多线程研究(4)——从一道面试题说起

    有一道这种面试题:开启一个子线程和主线程同一时候运行,子线程输出10次后接着主线程输出100次,如此重复50次.先看以下代码: package com.maso.test; /** * * @auth ...

  7. nginx安装php和php-fpm

    最近在学习nginx,看了好多帖子终于安装成功了. 经验,首先不要用yum安装,安装完以后根本找不到安装目录在哪里呀,然后安装失败以后会很不方便. 最终选择了自己编译安装. 看了好多帖子都不行,终于找 ...

  8. ios7自带的晃动效果

    ios7自带的晃动效果 by 伍雪颖 - (void)registerEffectForView:(UIView *)aView depth:(CGFloat)depth; { UIInterpola ...

  9. xml配置和基于java类的bean配置搭配使用

    如果同时使用了xml配置,和java类的bean配置(当然估计项目中一般不会这样), 在初始化容器指定资源文件的时候可能会比较麻烦 此时我们可以把基于java类的bean配置整合到xml中,或xml的 ...

  10. _blank开新窗体不符合标准?

    我们要在新窗体中打开链接通常的做法是在链接后面加target="_blank",我们採用过渡型的DOCTYPE(xh tml1-transitional. dtd)时没有问题,可是 ...