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-22 16:55:14

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

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

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

DOM基础教程之事件对象

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

JavaScript学习笔记之JS事件对象_基础知识

事件对象:当事件发生时,浏览器自动建立该对象,并包含该事件的类型.鼠标坐标等. 事件对象的属性:格式:event.属性. 一些说明: event代表事件的状态,例如触发event对象的元素.鼠标的位置及状态.按下的键等等: event对象只在事件发生的过程中才有效. firefox里的event跟IE里的不同,IE里的是全局变量,随时可用:firefox里的要用参数引导才能用,是运行时的临时变量. 在IE/Opera中是window.event,在Firefox中是event: 而事件的对象,在

JavaScript基础语法、dom操作树及document对象_基础知识

第一部分 基本语法: 1.数据类型(字符串.小数.整数.布尔.时间日期) 复制代码 代码如下: var s="3.14" var n=parsefloat(s) s+=5; var s="abc3.14" var n=parsefloat(s) //NaN s+=5;//解析转换成小数型 var d=parseInt(s)//解析转换成整数型 isNaN(字符串),判断是不是数字模样的字符串,是-false:否-true 2.变量 3.运算符:四大类 4.表达式(为

Javascript基础知识(一)核心基础语法与事件模型_基础知识

一.Javascript核心基础语法 1.Javascript是一门增加交互效果的编程语言,它最初由网景公司发明,最后提交给ECMA(欧洲计算机制造商协会),ECMA将Javascript标准化,其命名为Javascript. 2.Javascript是一门解释性语言,无需编译就可以直接在浏览器下运行. 3.Javascript的用途?  1.可以控制网页中所有元素,增加.删除.修改元素的属性.  2.可以在html中放入动态文本.  3.响应用户在使用网页时产生的事件.  4.校验用户输入的数

Three.js源码阅读笔记(基础的核心Core对象)_基础知识

Three.js是一个比较伟大的webgl开源库,它简化了浏览器3D编程,使得使用JavaScript在浏览器中创建复杂的场景变得容易很多.Github上众多webgl demo令我兴奋不已,跃跃欲试.由于这个库还处在开发阶段,因此资料非常匮乏,爱好者大部分时间不得不通过阅读该库的源码进行学习,我现在也准备这样做. 这是第一篇笔记,先从最基础的核心(Core)对象开始. Core::Vector2 该构造函数用来创建一个表示二维向量的对象 复制代码 代码如下: THREE.Vector2 = f

Javascript基础教程之数据类型转换_基础知识

所有语言都有类型转化的能力,javascript也不例外,它也为开发者提供了大量的类型转化访法,通过全局函数,可以实现更为复杂的数据类型. 复制代码 代码如下: var a = 3; var b = a + 3; var c = "student" + a; var d = a.toString(); var e = a + ""; document.write(typeof(a) + " " + typeof (b) + " &quo

Javascript基础教程之比较操作符_基础知识

和其他语言一样,JavaScript也有条件语句对流程上进行判断.包括各种操作符合逻辑语句 比较操作符 常用的比较操作符有      等于 == ,  不等于!= , 大于 >, 小于 <,大于等于 >= ,小于等于 <= 复制代码 代码如下:     document.write("Study" == "study");//false     document.write("Study" < "study

DOM基础教程之事件类型

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