DOM基础教程之事件对象

 浏览器中的事件都是以对象的形式存在的,同样ie浏览器与标准dom浏览器之间存在获取事件对象上也存在差别。在ie浏览器中事件对象是windows对象的一个属性event,访问通常采用如下方法。

 

代码如下:

oP.onclick = function(){
var oEvent = window.event;
}

 

尽管它是window对象属性,但event对象还是只能在事件发生时被访问,所有的事件处理函数执行完之后,该对象就消失了。

而标准的dom规定event对象必须作为唯一的参数传给事件处理函数。一次在类似火狐浏览器中访问事件对象通常作为参数,代码如下:

 

代码如下:

oP.onclick = function(oEvent){
}

 

因此,为了兼容两种浏览器,通常采用下面的方法

 

代码如下:

oP.onclick = function(oEvent){
if(window.event)oEvent = window.event;
}

 

浏览器在获取了事件的对象后就可以通过它的一系列属性和方法处理各种事件了,例如鼠标事件,键盘事件和浏览器事件。等

以下罗列了常用的属性和方法:

从以上可以看出,两类浏览器还是有一些相似之处,例如type属性便是各种浏览器所兼容的,它表示获取事件的类型,返回类似“click”,“mousemove”之类的值。

 

这对于同一个函数处理多个种类事件十分有用。

如下:同一个函数 处理多种事件。

 

代码如下:

<script language="javascript">
function handle(oEvent) {
var disp = document.getElementById("display");
if (window.event) oEvent = window.event; //处理兼容性,获得对象
if (oEvent.type == "click")
disp.innerHTML += "你点击了我!";
else if (oEvent.type == "mouseover")
disp.innerHTML += "你移动到我的上面";
}
window.onload = function() {
var oP = document.getElementById("box");
oP.onclick = handle;
oP.onmouseover = handle;
}
</script>
<div>
<div id="box" style="width:100px;height:100px;background:#ddd;"></div>
<p id="display">Click Me</p>
</div>

 

以上代码给id="box"的div添加了两个事件响应函数,而这两个事件却是同一个函数

在这函数中首先考虑兼容获得事件对象,然后利用type属性盘对事件的名称。

在检测shift、alt、ctrl这三个按键时,两类浏览器使用的方法也完全一样,都具有 shiftKey,altKey,ctrlKey这三个属性,

代码如下:

 

代码如下:

var bShift = oEvent.shiftKey;
var bAlt = oEvent.altKey;
var bCtrl = oEvent.ctrlKey;

 

另外,在获取鼠标指针上,两类浏览器使用的方法都一样,都具有clientX、clientY和screenX、screenY。

其中,clientX和clientY表示鼠标在客户端区域的位置,不包括浏览器的状态栏,菜单栏等。

代码如下:

 

代码如下:

var iClientX = oEvent.clientX;
var iClientY = oEvent.clientY;

 

而screenX和sreenY则指的是鼠标在整个计算机屏幕的位置,代码是

 

代码如下:

var iScreenX = oEvent.screenX;
var iScreenY = oEvent.screenY;

 

很多时候,开发者想知道事件是由那个对象触发的,即事件的目标(target)。

假设<p>元素分配onclick事件处理函数,触发click事件时<p>就会被认为是目标。

在IE浏览器中,目标包含在event对象的srcElement属性中,代码如下

 

代码如下:
var oTarget = oEvent.srcElement;

 

而在标准的DOM浏览器中,目标则包含在target属性中,代码如下

 

代码如下:
var oTarget = oEvent.Target;

 

获取事件的目标

 

代码如下:

<script language="javascript">
function handle(oEvent) {
var disp = document.getElementById("display");
if (window.event) oEvent = window.event; //处理兼容性,获得对象
var oTarget;
if (oEvent.srcElement) //处理兼容性,获得事件
oTarget = oEvent.srcElement;
else
oTarget = oEvent.target;
disp.innerHTML += "元素名称:" + oTarget.tagName +"<br>" + "元素内容:" + oTarget.textContent + "<br>"
+ "之前紧随的节点:" + oTarget.textContent + "<br>"
;
}
window.onload = function() {
var oP = document.getElementById("box");
oP.onclick = handle;
}
</script>
<div>
<div id="box" style="width:100px;height:100px;background:#ddd;">
box内容
</div>
<p id="display"></p>
</div>
(补充)Element 对象的属性 http://www.w3school.com.cn/xmldom/dom_element.asp
(补充)Element 对象的方法 http://www.w3school.com.cn/xmldom/dom_element.asp

 

由于事件的目标在两类浏览器上不同,因此代码必须保证兼容性,通常的做法就是直接将对象作为if语句的条件,代码如下

 

代码如下:

if (oEvent.srcElement)
oTarget = oEvent.srcElement;
else
oTarget = oEvent.target;

 

这种方法在其它属性中也是常用的。

时间: 2024-10-06 08:56:12

DOM基础教程之事件对象的相关文章

DOM基础教程之事件对象_基础知识

浏览器中的事件都是以对象的形式存在的,同样ie浏览器与标准dom浏览器之间存在获取事件对象上也存在差别.在ie浏览器中事件对象是windows对象的一个属性event,访问通常采用如下方法. 复制代码 代码如下: oP.onclick = function(){ var oEvent = window.event; } 尽管它是window对象属性,但event对象还是只能在事件发生时被访问,所有的事件处理函数执行完之后,该对象就消失了. 而标准的dom规定event对象必须作为唯一的参数传给事

DOM基础教程之事件类型

 对于用户事件类型而言,最常用的是鼠标.键盘.浏览器. 1.鼠标事件: 鼠标的事件都频繁使用,下面例子就测试各种鼠标事件   代码如下: <script language="javascript"> function handle(oEvent) { var disp = document.getElementById("display"); if (window.event) oEvent = window.event; //处理兼容性,获得对象 di

DOM基础教程之事件类型_基础知识

对于用户事件类型而言,最常用的是鼠标.键盘.浏览器. 1.鼠标事件: 鼠标的事件都频繁使用,下面例子就测试各种鼠标事件 复制代码 代码如下: <script language="javascript">             function handle(oEvent) {                 var disp = document.getElementById("display");                 if (window

DOM基础教程之使用DOM设置文本框

 这篇文章主要介绍了DOM基础教程之使用DOM设置文本框的相关资料,需要的朋友可以参考下     1.控制用户输入的字符个数 对于单行文本框和密码输入框,可以利用maxlength属性控制用户输入的字符个数. 对于多行文本,maxlength为自定义属性,其值最多输入的字符的个数,在onkeypress事件发生时则调运返回LessThan()函数返回值,函数如下 <textarea name="comments" id="comments" cols=&quo

DOM基础教程之使用DOM + Css

 这篇文章主要介绍了DOM基础教程之使用DOM + Css,需要的朋友可以参考下     1.使用getElementsByTagName修改class类别或者追加类别   代码如下: <ul class="name1" onclick="clickz()"> <p>第一个</p> <p>第一个</p> <p>第一个</p> <p>第一个</p> </u

汇编教程之事件对象

本课中我们将要学习事件对象以及如何在多线程编程中如何使用同步对象. 理论: 上一课中我们演示了如何用WINDOWS消息在不同的线程之间进行通讯.另外的两种,即:使用全局变量和事件对象,将在本课中讲解. 事件对象就像一个开关:它只有两种状态---开和关.当一个事件处于"开"状态,我们称其为"有信号"否则称为"无信号".您可以在一个线程的执行函数中创建一个事件对象,然后观察它的状态,如果是"无信号"就让该线程睡眠,这样该线程占用的

DOM基础教程之使用DOM控制表格

 表格的css控制就先不说了,首先分享下表格常用的DOM   表格添加操作的方法常用的为insertRow()和insertCell()方法. row是从零开始计算起的,例如:   代码如下: var oTr = document.getElementById("member").insertRow(2)   是指将新行添加到第二行.   代码如下: var aText = new Array(); aText[0] = document.createTextNode("fr

DOM基础教程之使用DOM控制表单

 1.表单简介 表单<form>是网页中交互最多的形式之一,它通过各种形式接收用户的数据,包括下拉列表框,单选按钮,复选框和文本框,本篇主要介绍表单中常用的属性和方法 javascript中可以很方便的操作表单,例如获得表单数据进行有效验证,自动给表单域赋值,处理表单事件等. 此时每个form都解析为一个对象,即form对象,可以通过document.forms集合来引用这些对象,例如一个nama属性为form1的表单可以使用   代码如下: document.forms["form

DOM基础教程之使用DOM控制表单_基础知识

1.表单简介 表单<form>是网页中交互最多的形式之一,它通过各种形式接收用户的数据,包括下拉列表框,单选按钮,复选框和文本框,本篇主要介绍表单中常用的属性和方法 javascript中可以很方便的操作表单,例如获得表单数据进行有效验证,自动给表单域赋值,处理表单事件等. 此时每个form都解析为一个对象,即form对象,可以通过document.forms集合来引用这些对象,例如一个nama属性为form1的表单可以使用 复制代码 代码如下: document.forms["fo