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 内置对象属性及方法集合
Jul 04 Javascript
jquery插件制作 表单验证实现代码
Aug 17 Javascript
JavaScript的递归之递归与循环示例介绍
Aug 05 Javascript
js螺旋动画效果的具体实例
Nov 15 Javascript
详解页面滚动值scrollTop在FireFox与Chrome浏览器间的兼容问题
Dec 03 Javascript
js动态添加的DIV中的onclick事件简单实例
Jul 25 Javascript
jquery轮播的实现方式 附完整实例
Jul 28 Javascript
写给vue新手们的vue渲染页面教程
Sep 01 Javascript
使用Dropzone.js上传的示例代码
Oct 10 Javascript
深入理解requireJS-实现一个简单的模块加载器
Jan 15 Javascript
在小程序中推送模板消息的实现方法
Jul 22 Javascript
在Vue 中实现循环渲染多个相同echarts图表
Jul 20 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 5.0对象模型深度探索之类的静态成员
2008/03/27 PHP
利用PHP如何实现Socket服务器
2015/09/23 PHP
PHP使用fopen与file_get_contents读取文件实例分享
2016/03/04 PHP
PHP常用排序算法实例小结【基本排序,冒泡排序,快速排序,插入排序】
2017/02/07 PHP
php实现socket推送技术的示例
2017/12/20 PHP
ThinkPHP5 验证器的具体使用
2018/05/31 PHP
关于js类的定义
2011/06/28 Javascript
js中将URL中的参数提取出来作为对象的实现代码
2011/08/16 Javascript
javascript跨浏览器的属性判断方法
2014/03/16 Javascript
Windows系统中安装nodejs图文教程
2015/02/28 NodeJs
IE浏览器下PNG相关功能
2015/07/05 Javascript
JQuery中attr属性和jQuery.data()学习笔记【必看】
2016/05/18 Javascript
浅析Bootstrap验证控件的使用
2016/06/23 Javascript
微信小程序 获取微信OpenId详解及实例代码
2016/10/31 Javascript
Vue实现双向绑定的方法
2016/12/22 Javascript
JS获取浏览器地址栏的多个参数值的任意值实例代码
2018/07/24 Javascript
记React connect的几种写法(小结)
2018/09/18 Javascript
插入排序_Python与PHP的实现版(推荐)
2017/05/11 Python
python复制文件到指定目录的实例
2018/04/27 Python
Python切片索引用法示例
2018/05/15 Python
Python单元测试实例详解
2018/05/25 Python
Python二进制串转换为通用字符串的方法
2018/07/23 Python
对python自动生成接口测试的示例讲解
2018/11/30 Python
python实现多层感知器
2019/01/18 Python
Python Numpy库常见用法入门教程
2020/01/16 Python
css3动画 小球滚动 js控制动画暂停
2019/11/29 HTML / CSS
施华洛世奇美国官网:SWAROVSKI美国
2018/02/08 全球购物
StubHub希腊:购买体育赛事、音乐会和剧院门票
2019/08/03 全球购物
精致的手工皮鞋:Shoe Embassy
2019/11/08 全球购物
Farfetch澳大利亚官网:Farfetch Australia
2020/04/26 全球购物
参观接待方案
2014/03/17 职场文书
房产继承公证书
2014/04/09 职场文书
工作建议书范文
2014/05/13 职场文书
党员对照检查材料
2014/09/22 职场文书
微笑面对生活演讲稿
2014/09/23 职场文书
供应商食品安全承诺书
2015/04/29 职场文书