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. [html]js打开指定页面

    1.在当前窗口打开 location.href = "http://www.baidu.com"; 2.可以设置开发方式 window.open("http://www. ...

  2. 写入目录 /tmp/OraInstall2015-05-20_03-35-53PM 时出错

    做足准备工作之后进行安装oracle,运行runInstall的时候别的时候输出如下错误 写入目录 /tmp/OraInstall2015-05-20_03-35-53PM 时出错.请确保此目录是可写 ...

  3. iOS Xcode的快捷键

    将一些搜集和经常使用的快捷键记录下来,方便你我. Command +1~ 8: 跳转到导航区的不同位置 Command +0 :显示/隐藏导航区 Command Alt 1~ 6:在不同检测器之间跳转 ...

  4. Effective Java:Ch4_Class:Item13_最小化类及其成员的可访问性

    要区别一个模块是否设计良好,最重要的因素是,对于其他模块而言该模块隐藏其内部数据和其他实现细节的程度.设计良好的模块应该隐藏所有实现细节,将API与其实现清晰地隔离开来.这样,模块之间通过他们的API ...

  5. React-Native首次运行提示-ReferenceError-Can-t-find-variable-fbBatchedBridge

    React Native运行报错ReferenceError: Can't find variable: _fbBatchedBridge' React Native目前貌似要火的样子,作为移动开发人 ...

  6. 深入浅出Android动态载入jar包技术

    在实际项目中.因为某些业务频繁变更而导致频繁升级client的弊病会造成较差的用户体验,而这也恰是Web App的优势,于是便衍生了一种思路.将核心的易于变更的业务封装在jar包里然后通过网络下载下来 ...

  7. cocos2d-x 2.1.4学习笔记01:windows平台搭建cocos2d-x开发环境

    cocos2d-x的大致开发流程是,首先使用win32版进行代码编写并完成游戏,然后将代码迁移到对应的开发环境上进行交叉编译完成游戏打包,如iphone上是mac+xcode,android是ecli ...

  8. Enable SPI 1.0 and 1.1 with device tre overlays on BeagleBone

    For most people the above image means absolutely nothing, but for that one guy that has been searchi ...

  9. 自己动手用Javascript写一个无刷新分页控件

    .NET技术交流群:337901356 ,欢迎您的加入! 对 于一个用户体验好的网站来说,无刷新技术是很重要的,无刷新,顾名思义,就是局部刷新数据,有用过Asp.net Web Form技术开发网页的 ...

  10. Magento 的程序架构与流程

    以下是分别详细解读分析程序的各层次源码: MAGENTO_ROOT: //入口文件 /index.php -----–| 1.判断php版本是否大于5.22.引入Magento主要的中心类/app/M ...