DOM基础教程之事件对象


Posted in Javascript onJanuary 20, 2015

浏览器中的事件都是以对象的形式存在的,同样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; 

}

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

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

DOM基础教程之事件对象

从以上可以看出,两类浏览器还是有一些相似之处,例如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;

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

Javascript 相关文章推荐
用javascript实现的图片马赛克后显示并切换加文字功能
Apr 21 Javascript
基于JQuery实现CheckBox全选全不选
Jun 27 Javascript
jQuery源码分析-03构造jQuery对象-工具函数
Nov 14 Javascript
javascript确认框的三种使用方法
Dec 17 Javascript
iframe窗口高度自适应的实现方法
Jan 08 Javascript
编程语言JavaScript简介
Oct 16 Javascript
Node.js中HTTP模块与事件模块详解
Nov 14 Javascript
谈谈impress.js初步理解
Sep 09 Javascript
JavaScript使用链式方法封装jQuery中CSS()方法示例
Apr 07 jQuery
微信小程序CSS3动画下拉菜单效果
Nov 04 Javascript
jQuery操作cookie的示例代码
Jun 05 jQuery
Vuex的实战使用详解
Oct 31 Javascript
js判断浏览器版本以及浏览器内核的方法
Jan 20 #Javascript
js实现的捐赠管理完整实例
Jan 20 #Javascript
JS自定义对象实现Java中Map对象功能的方法
Jan 20 #Javascript
JavaScript数组Array对象增加和删除元素方法总结
Jan 20 #Javascript
DOM基础教程之使用DOM + Css
Jan 20 #Javascript
jquery+ajax实现跨域请求的方法
Jan 20 #Javascript
嵌入式iframe子页面与父页面js通信的方法
Jan 20 #Javascript
You might like
隐藏你的.php文件的实现方法
2007/03/19 PHP
php简单日历函数
2015/10/28 PHP
鼠标图片振动代码
2006/07/06 Javascript
如何用javascript判断录入的日期是否合法
2007/01/08 Javascript
jquery imgareaselect 使用利用js与程序结合实现图片剪切
2009/07/30 Javascript
jquery实现保存已选用户
2014/07/21 Javascript
基于javascript的COOkie的操作实现只能点一次
2014/12/26 Javascript
jquery动态添加删除(tr/td)
2015/02/09 Javascript
JavaScript实现页面跳转的方式汇总
2016/05/16 Javascript
jQuery3.0中的buildFragment私有函数详解
2016/08/16 Javascript
JS之获取样式的简单实现方法(推荐)
2016/09/13 Javascript
详解网站中图片日常使用以及优化手法
2017/01/09 Javascript
使用jQuery卸载全部事件的思路详解
2017/04/03 jQuery
JavaScript队列的应用实例详解【经典数据结构】
2017/04/12 Javascript
jQuery EasyUI 为Combo,Combobox添加清除值功能的实例
2017/04/13 jQuery
ReactJs设置css样式的方法
2017/06/08 Javascript
详解webpack+gulp实现自动构建部署
2017/06/29 Javascript
Angular6封装http请求的步骤详解
2018/08/13 Javascript
element-ui表格合并span-method的实现方法
2019/05/21 Javascript
微信小程序HTTP接口请求封装代码实例
2019/09/05 Javascript
JavaScript实现移动端拖动元素
2020/11/24 Javascript
在Python3 numpy中mean和average的区别详解
2019/08/24 Python
django中的图片验证码功能
2019/09/18 Python
基于python纯函数实现井字棋游戏
2020/05/27 Python
matplotlib 画双轴子图无法显示x轴的解决方法
2020/07/27 Python
新西兰便宜隐形眼镜购买网站:QUICKLENS New Zealand
2019/03/02 全球购物
日本订房网站,预订日本星级酒店/温泉旅馆:Relux(支持中文)
2020/01/03 全球购物
介绍一下linux文件系统分配策略
2013/02/25 面试题
医生自荐信
2013/10/11 职场文书
结婚周年感言
2014/02/24 职场文书
晨会主持词
2014/03/17 职场文书
社区服务活动小结
2014/07/08 职场文书
三严三实民主生活会发言稿
2014/10/13 职场文书
写给领导的感谢信
2015/01/22 职场文书
接待员岗位职责范本
2015/04/15 职场文书
音乐之声观后感
2015/06/04 职场文书