`
heichong
  • 浏览: 45611 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

event事件说明

阅读更多
 
event对象

  属性:  altKey, shiftKey,  ctrlKey,
			button, clientX, clientY, keyCode, offsetX, offsetY, propertyName, 
			returnvalue, screenX, screenY, srcElement, srcFilter, 
			type, x, y 
--------------------------------------------------------------------------------
	1.altKey 
	  检查alt键的状态。 语法: 
	  event.altKey 可能的值: 
	  当alt键按下时,值为 TRUE ,否则为 FALSE 。只读。 
		shiftKey,  ctrlKey 同上 
  2.button 
	  检查按下的鼠标键。 语法: 
	  event.button 可能的值: 
	  0 没按键 
	  1 按左键 
	  2 按右键 
	  3 按左右键 
	  4 按中间键 
	  5 按左键和中间键 
	  6 按右键和中间键 
	  7 按所有的键 这个属性仅用于onmousedown, onmouseup, 和 onmousemove 事件。
		对其他事件,不管鼠标状态如何,都返回 0(比如onclick)。
  3.clientX 
	  描述: 
	  返回鼠标在窗口客户区域中的X坐标。 语法: 
	  event.clientX 注释: 
	  这是个只读属性。这意味着,你只能通过它来得到鼠标的当前位置,却不能用它来更改鼠标的位置。 
  4.clientY 
	  描述: 
	  返回鼠标在窗口客户区域中的Y坐标。 语法: 
	  event.clientY 注释: 
	  这是个只读属性。这意味着,你只能通过它来得到鼠标的当前位置,却不能用它来更改鼠标的位置。 
  5.ctrlKey 
	  描述: 
	  检查ctrl键的状态。 语法: 
	  event.ctrlKey 可能的值: 
	  当ctrl键按下时,值为 TRUE ,否则为 FALSE 。只读。 

  6.keyCode 
	  描述:
	  检测键盘事件相对应的内码。 
	  这个属性用于 onkeydown, onkeyup, 和 onkeypress 事件。 语法: 
	  event.keyCode[ = keyCode] 
	  可能的值: 
	  这是个可读写的值,可以是任何一个Unicode键盘内码。如果没有引发键盘事件,则该值为 0 。 
  7.offsetX 
	  描述: 
	  检查相对于触发事件的对象,鼠标位置的水平坐标 语法: 
	  event.offsetX 
  8.offsetY 
	  描述: 
	  检查相对于触发事件的对象,鼠标位置的垂直坐标 语法: 
	  event.offsetY 
  9.propertyName 
	  描述: 
	  设置或返回元素的变化了的属性的名称。 语法: 
	  event.propertyName [ = sProperty ] 可能的值: 
	  sProperty 是一个字符串,指定或返回触发事件的元素在事件中变化了的属性的名称。 
	  这个属性是可读写的。无默认值。 注释: 
	  你可以通过使用 onpropertychange 事件,得到 propertyName 的值。 例子: 
	  下面的例子通过使用 onpropertychange 事件,弹出一个对话框,显示 propertyName 的值。 <HEAD> 
	  <SCRIPT> 
	  function changeProp() 
	  { 
	      btnProp.value = "This is the new value"; 
	  } 
             function changeCSSProp() 
	  { 
	      btnStyleProp.style.backgroundColor = "aqua"; 
	  } 
	  </SCRIPT> 
	  </HEAD> 
	  <BODY> 
	      <P>The event object property propertyName is 
	  used here to return which property has been 
	  altered.</P> <INPUT TYPE=button ID=btnProp onclick="changeProp()" 
	  value="Click to change the value property of this button" 
	  onpropertychange=’alert(event.propertyName+" property has changed value")’> 
	      <INPUT TYPE=button ID=btnStyleProp 
	  onclick="changeCSSProp()" 
	  value="Click to change the CSS backgroundColor property of this button" 
	  onpropertychange=’alert(event.propertyName+" property has changed value")’> 
	  </BODY> 
  10.returnvalue 
	  描述: 
	  设置或检查从事件中返回的值 语法: 
	  event.returnvalue[ = Boolean] 可能的值: 
	  true 事件中的值被返回 
	  false 源对象上事件的默认操作被取消 例子见本文的开头。 
  11.screenX 
	  描述: 
	  检测鼠标相对于用户屏幕的水平位置 语法: 
	  event.screenX 
	  注释: 
	  这是个只读属性。这意味着,你只能通过它来得到鼠标的当前位置,却不能用它来更改鼠标的位置。 
  12.screenY 
	  描述: 
	  检测鼠标相对于用户屏幕的垂直位置 语法: 
	  event.screenY 注释: 
	  这是个只读属性。这意味着,你只能通过它来得到鼠标的当前位置,却不能用它来更改鼠标的位置。 
   
  13.srcElement 
	  描述: 
	  返回触发事件的元素。只读。例子见本文开头。 语法: 
	  event.srcElement 
  14.srcFilter 
	  描述: 
	  返回触发 onfilterchange 事件的滤镜。只读。 语法: 
	  event.srcFilter 
  
  15.type 
	  描述: 
	  返回事件名。 语法: 
	  event.type 注释: 
	  返回没有“on”作为前缀的事件名,比如,onclick事件返回的type是click 
	  只读。 
  16. x 
	  描述: 
	  返回鼠标相对于css属性中有position属性的上级元素的x轴坐标。如果没有css属性中有position属性的上级元素,默认以BODY元素作为参考对象。 语法: 
	  event.x 注释: 
	  如果事件触发后,鼠标移出窗口外,则返回的值为 -1 
	  这是个只读属性。这意味着,你只能通过它来得到鼠标的当前位置,却不能用它来更改鼠标的位置。 
  17. y 
  	描述: 
	  返回鼠标相对于css属性中有position属性的上级元素的y轴坐标。如果没有css属性中有position属性的上级元素,默认以BODY元素作为参考对象。 语法: 
	  event.y 注释: 
	  如果事件触发后,鼠标移出窗口外,则返回的值为 -1 
	  这是个只读属性。这意味着,你只能通过它来得到鼠标的当前位置,却不能用它来更改鼠标的位置



event.clientX、clientY、x、y、offsetX、offsetY、screenX、screenY的区别
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> 坐标位置</TITLE>
<style>
*{
margin:0}
#d1{
position:absolute;
left:50px;
top:50px;
width:600px ;
height:500px ;
border:2px blue solid;
}
#d0{
position:relative;
left:50px;
top:50px;
width:700px ;
height:600px ;
border:2px blue solid;
}
</style>
</HEAD>

<SCRIPT>   
function   dullwolf()   { 
if (!document.all)
      var evt=arguments[0];
else
      var evt=event;
p1.innerText=window.event.x;   
p2.innerText=window.event.y;   
p3.innerText=window.event.clientX;   
p4.innerText=window.event.clientY;   
p5.innerText=window.event.offsetX;   
p6.innerText=window.event.offsetY;   
p7.innerText=window.event.screenX;   
p8.innerText=window.event.screenY;   
}   
      
</SCRIPT>     
<body onmousemove="dullwolf();">   
<div id="d0">
这里是D0
<div id="d1">
这里都是D1<BR/>
event.x=<span   id="p1">   </span>;   
event.y=<span   id="p2">   </span>;   
clientX=<span   id="p3">   </span> ; 
clientY=<span   id="p4">   </span> ; <br> 
offsetX=<span   id="p5">   </span> ; 
offsetY=<span   id="p6">   </span> ; 
screenX=<span   id="p7">   </span> ; 
screenY=<span   id="p8">   </span>;
<p>test</p>
    <p>test</p>
     </div>
</div>
</body>
</HTML>


scrollLeft:当网页宽度超出屏幕宽度,并向右滚动了部分网页时,该值表示网页左边被卷去的宽度。

scrollTop:同上,网页上部被卷去的高度。

所以,若网页有被滚动(有滚动条且进行了滚动),则此时鼠标的坐标应为:

x=event.clientX+document.body.scrollLeft;

y=event.clientY+document.body.scrollTop;
分享到:
评论

相关推荐

    Cimplicity HMI 事件编辑器(Event Editor)说明手册

    Event Editor是Cimplicity HMI中用于处理事件和动作逻辑的一种工具,它允许用户创建、编辑和组织各种事件和动作,这些事件和动作可以响应各种用户操作或系统触发的事件。 文档使用了一系列文档图标来标识不同的信息...

    C#事件(event)使用方法详解

    事件(event)和委托(delegate)之间的关系可以通过一个浅显的比方来说明,委托(delegate) 就像房屋租赁中介,当你把租房子的消息告知中介后,中介就会产生出一套符合你要求的房屋租赁方案来。 事件(event)的实现: ...

    event事件的使用及说明

    【事件(event)】在Web开发中,事件是用户与网页交互的关键部分,它允许JavaScript响应用户的操作,如点击按钮、滚动页面或者填写表单。HTML DOM Event对象是JavaScript处理事件的核心,它代表了事件的状态,包括事件...

    event和srcElement说明,方法,技巧

    `event`对象包含了大量与事件有关的信息,包括事件类型、时间戳、目标元素等。 本文主要介绍`event`对象中的`srcElement`属性,以及在不同浏览器中的兼容性问题。同时,我们还将探讨如何在不同的环境中正确地使用`...

    mysql中event事件使用详解.docx

    在这个例子中,`student_bak_event`是事件名称,设置在当前时间+1天的时间点执行(即每天凌晨),事件完成后保留,事件开启,并且添加了一个注释说明其功能。`DO BEGIN...END`之间是事件执行的主体,这里调用了存储...

    iPanel浏览器EVENT处理说明

    ### iPanel浏览器EVENT处理说明详解 #### 一、iPanel浏览器EVENT处理原则 根据文档中的说明,iPanel浏览器处理EVENT遵循以下两个基本原则: 1. **灵活性原则**:iPanel尽可能多地将EVENT交给HTML页面、JavaScript...

    EventLog,输出到系统事件日志

    ### EventLog:输出到系统事件日志 #### 一、EventLog的概念与作用 EventLog是一种用于记录系统或应用程序运行过程中发生的事件的技术。通过EventLog,开发者能够将关键信息输出到系统的事件日志中,方便后续对...

    十一、Web编程中Event事件详解与实战

    内容概要:本文档详尽地讲解了 Web 编程中的Event事件相关知识,具体涵盖事件对象的概念及其获取方式,不同环境下的兼容处理技巧如 mouse events 和 key events,以及 event.bubble 及其阻断。此外还包括一系列的...

    visualevent.zip

    另一方面,“使用说明- 谷歌浏览器.txt”文件则包含了在谷歌浏览器上安装和使用Visual Event的详细步骤。对于初次接触此插件的用户来说,这是一个非常有用的指南,可以帮助他们顺利开始使用这个工具。 总的来说,...

    event driving system draw the diagram

    事件驱动系统(Event Driven System,EDS)是一种软件架构模式,它依赖于事件的产生、传播和处理来实现系统的协调工作。在这种模式下,系统中的各个组件通过发送和接收事件进行通信,而不是直接调用彼此。事件可以是...

    pb各个事件ID简单说明

    ### pb各个事件ID简单说明 在用户界面设计与开发领域,事件处理机制是十分关键的一环,它确保了用户交互的流畅性和应用的响应性。本文将基于提供的标题、描述和部分上下文内容,详细解释几个重要的用户自定义事件ID...

    Oracle常见等待事件说明

    Oracle 等待事件说明 Oracle 等待事件是衡量 Oracle 运行状况的重要依据及指标。等待事件的概念是在 Oracle 7.0.1.2 中引入的,大致有 100 个等待事件。在 Oracle 8.0 中这个数目增加到了大约 150 个,在 Oracle 8i...

    使用JS监听键盘按下事件(keydown event)

    本文将详细介绍如何使用JavaScript来监听键盘按下事件(keydown event),并结合示例代码来说明如何实现。 首先,我们需要了解JavaScript中的键盘事件主要有三个:keydown、keypress和keyup。其中,keydown事件在...

    vc模拟按键实现代码,基于keybd_event

    `keybd_event`函数是Windows API中用于模拟键盘事件的函数,它的原型如下: ```cpp void keybd_event( BYTE bVk, BYTE bScan, DWORD dwFlags, ULONG_PTR dwExtraInfo ); ``` 参数说明如下: - `bVk`:虚拟键码...

    event-B入门基础手册

    - **事件(Event)**:代表状态变迁,即从一个状态到另一个状态的变化过程。 - **证明义务(Proof Obligations)**:为了确保模型的正确性,需要进行数学上的证明。证明义务是指在模型构建过程中产生的需要验证的逻辑...

    outlook event

    Outlook Event监听器则是用于跟踪和响应Outlook应用程序中特定事件的程序组件。在深入探讨这个主题之前,我们需要了解一些基本的背景知识。 Microsoft Outlook是一款广泛使用的电子邮件、日历、任务管理和其他办公...

    scan_event.rar_event

    【标题】"scan_event.rar_event" 是一个与事件日志相关的编程资源压缩包,它包含了一系列用于查看和处理系统事件的源代码。该压缩包旨在帮助开发者理解和实现对Windows操作系统事件日志的浏览功能。 【描述】中提到...

    Event-B学习入门

    以“咖啡俱乐部”为例,该例子用于说明如何使用Event-B来定义一个简单的机器。在这个例子中,我们定义了一个咖啡俱乐部的上下文,其中包括成员资格、购买咖啡等操作。 ##### 2. 证明义务 - **证明义务(Proof ...

    JavaScript事件对象event用法分析

    本文实例讲述了JavaScript事件对象event用法。分享给大家供大家参考,具体如下: 前面的文章已经介绍了JavaScript为事件指定处理程序的五种方式。 下面继续介绍JavaScript的事件对象event。 事件对象event包含导致...

    EventLoop.pptx

    在JavaScript的世界里,事件循环(Event Loop)是执行模型的核心部分,它确保了代码的顺序执行和非阻塞特性。JavaScript引擎是单线程的,这意味着在同一时间只能执行一个任务。这种设计使得JavaScript在处理复杂的...

Global site tag (gtag.js) - Google Analytics