脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → 基础知识 → DOM基础教程之事件对象

DOM基础教程之事件对象

 更新时间：2015年01月20日 15:19:40   投稿：hebedich  
这篇文章主要介绍了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;

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

您可能感兴趣的文章:

相关文章

  • js之WEB开发调试利器:Firebug 下载

    js之WEB开发调试利器:Firebug 下载

    js之WEB开发调试利器:Firebug 下载...
    2007-01-01
  • JavaScript的this关键字的理解

    JavaScript的this关键字的理解

    今天的教程来自天才的Cody Lindley的新书：《JavaScript启蒙教程 / JavaScript Enlightenment》。他讨论了令人迷惑的关键字this，以及确定和设置this的值的方法。
    2016-06-06
  • JavaScript中使用Math.floor()方法对数字取整

    JavaScript中使用Math.floor()方法对数字取整

    这篇文章主要介绍了JavaScript中使用Math.floor()方法对数字取整,是JS入门学习中的基础知识,需要的朋友可以参考下
    2015-06-06
  • 浅谈JavaScript面向对象--继承

    浅谈JavaScript面向对象--继承

    这篇文章主要介绍了JavaScript面向对象继承，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-03-03
  • 浅谈javascript 迭代方法

    浅谈javascript 迭代方法

    这篇文章主要介绍了浅谈javascript 迭代方法的相关资料,需要的朋友可以参考下
    2015-01-01
  • javascript中怎么做对象的类型判断

    javascript中怎么做对象的类型判断

    javascript中经常使用的对象判断方式包括：typeof、constructor和Object.prototype.toString.call()
    2013-11-11
  • 基于javascript 闭包基础分享

    基于javascript 闭包基础分享

    闭包向来给包括JavaScript程序员在内的程序员以神秘，高深的感觉，事实上，闭包的概念在函数式编程语言中算不上是难以理解的知识
    2013-07-07
  • 原生javascript 学习之js变量全面了解

    原生javascript 学习之js变量全面了解

    下面小编就为大家带来一篇原生javascript 学习之js变量全面了解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-07-07
  • 浅谈javascript 归并方法

    浅谈javascript 归并方法

    这篇文章主要介绍了浅谈javascript 归并方法的相关资料,需要的朋友可以参考下
    2015-01-01
  • 详解js闭包

    详解js闭包

    闭包是一个比较抽象的概念,尤其是对js新手来说.书上的解释实在是比较晦涩,对我来说也是一样.
    2014-09-09

最新评论