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匿名函数的一种应用 代码封装
Jun 27 Javascript
JavaScript对数字的判断与处理实例分析
Feb 02 Javascript
深入理解jQuery中的事件冒泡
May 24 Javascript
jQuery过滤选择器经典应用
Aug 18 Javascript
实例解析jQuery中如何取消后续执行内容
Dec 01 Javascript
Vuex之理解Store的用法
Apr 19 Javascript
详解VUE 对element-ui中的ElTableColumn扩展
Mar 28 Javascript
小程序实现五星点评效果
Nov 03 Javascript
Koa 中的错误处理解析
Apr 09 Javascript
vue使用axios上传文件(FormData)的方法
Apr 14 Javascript
Node.js爬虫如何获取天气和每日问候详解
Aug 26 Javascript
一步一步实现Vue的响应式(对象观测)
Sep 02 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脚本的10个技巧(5)
2006/10/09 PHP
PHP中的类-什么叫类
2006/11/20 PHP
CodeIgniter实现更改view文件夹路径的方法
2014/07/04 PHP
PHP生成静态HTML页面最简单方法示例
2015/04/09 PHP
php获取文件后缀的9种方法
2016/03/22 PHP
php语言注释,单行注释和多行注释
2018/01/21 PHP
类之Prototype.js学习
2007/06/13 Javascript
判断多个元素(RADIO,CHECKBOX等)是否被选择的原理说明
2009/02/18 Javascript
Jquery ajax基础教程
2015/11/20 Javascript
js日期插件dateHelp获取本月、三个月、今年的日期
2016/03/07 Javascript
jquery 获取select数组与name数组长度的实现代码
2016/06/20 Javascript
javascript 显示全局变量与隐式全局变量的区别
2017/02/09 Javascript
javascript实现下雨效果
2017/03/27 Javascript
利用require.js与angular搭建spa应用的方法实例
2017/07/19 Javascript
快速解决vue动态绑定多个class的官方实例语法无效的问题
2018/09/05 Javascript
JavaScript基于数组实现的栈与队列操作示例
2018/12/22 Javascript
2019 年编写现代 JavaScript 代码的5个小技巧(小结)
2019/01/15 Javascript
node.js开发辅助工具nodemon安装与配置详解
2020/02/06 Javascript
[01:59]翻天覆地,因你而变,7.20版本地图更新速览
2018/11/24 DOTA
Django中URLconf和include()的协同工作方法
2015/07/20 Python
Python实现针对中文排序的方法
2017/05/09 Python
Python制作词云的方法
2018/01/03 Python
Python实现批量压缩图片
2018/01/25 Python
Python检查ping终端的方法
2019/01/26 Python
python中线程和进程有何区别
2020/06/17 Python
OpenCV Python实现图像指定区域裁剪
2021/03/12 Python
python 基于Apscheduler实现定时任务
2020/12/15 Python
html5教程画矩形代码分享
2013/12/04 HTML / CSS
小学生自我鉴定
2013/10/12 职场文书
辅导员评语
2014/05/04 职场文书
2014乡镇机关党员个人对照检查材料思想汇报
2014/10/09 职场文书
2015应届毕业生自荐信范文
2015/03/05 职场文书
2015年度内部审计工作总结
2015/05/20 职场文书
创业计划书之物流运送
2019/09/17 职场文书
导游词之珠海轮廓
2019/10/25 职场文书
Java Shutdown Hook场景使用及源码分析
2021/06/15 Java/Android