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 相关文章推荐
jquery使用ColorBox弹出图片组浏览层实例演示
Mar 14 Javascript
网页前端优化之滚动延时加载图片示例
Jul 13 Javascript
js构造函数、索引数组和属性的实现方式和使用
Nov 16 Javascript
js 定义对象数组(结合)多维数组方法
Jul 27 Javascript
基于js中的原型、继承的一些想法
Aug 10 Javascript
详解JS数据类型的值拷贝函数(深拷贝)
Jul 13 Javascript
vue表单绑定实现多选框和下拉列表的实例
Aug 12 Javascript
Canvas放置反弹效果随机图形(实例)
Aug 17 Javascript
在Vue中使用icon 字体图标的方法
Jun 14 Javascript
微信小程序在其他页面监听globalData中值的变化
Jul 15 Javascript
vue中的mescroll搜索运用及各种填坑处理
Oct 30 Javascript
Jquery ajax书写方法代码实例解析
Jun 12 jQuery
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脚本加密专家php解密算法
2020/09/13 PHP
PHP使用Alexa API获取网站的Alexa排名例子
2014/06/12 PHP
使用php转义输出HTML到JavaScript
2015/03/27 PHP
BOOM vs RR BO3 第二场2.13
2021/03/10 DOTA
JavaScript中使用构造器创建对象无需new的情况说明
2012/03/01 Javascript
JavaScript(js)设置默认输入焦点(focus)
2012/12/28 Javascript
js函数在frame中的相互调用详解
2014/03/03 Javascript
AngularJS基础学习笔记之控制器
2015/05/10 Javascript
常用javascript表单验证汇总
2020/07/20 Javascript
jquery+CSS3实现3D拖拽相册效果
2016/07/18 Javascript
JavaScript中在光标处插入添加文本标签节点的详细方法
2017/03/22 Javascript
Bootstrap 模态框多次显示后台提交多次BUG的解决方法
2017/12/26 Javascript
React 源码中的依赖注入方法
2018/11/07 Javascript
详解webpack 最简打包结果分析
2019/02/20 Javascript
vue-cli项目使用mock数据的方法(借助express)
2019/04/15 Javascript
使用RxJS更优雅地进行定时请求详析
2019/06/02 Javascript
解决vue动态路由异步加载import组件,加载不到module的问题
2020/07/26 Javascript
js+html+css实现手动轮播和自动轮播
2020/12/30 Javascript
使用python在校内发人人网状态(人人网看状态)
2014/02/19 Python
使用Python判断质数(素数)的简单方法讲解
2016/05/05 Python
总结python中pass的作用
2019/02/27 Python
Python实现队列的方法示例小结【数组,链表】
2020/02/22 Python
pip安装tensorflow的坑的解决
2020/04/19 Python
把富文本的回车转为br标签
2019/08/09 HTML / CSS
Reebok官方旗舰店:美国知名健身品牌锐步
2019/01/07 全球购物
澳大利亚实惠时尚女装商店:Katies
2019/06/16 全球购物
财务出纳岗位职责
2014/02/03 职场文书
旅游管理毕业生自荐信范文
2014/03/19 职场文书
幼儿园安全生产月活动总结
2014/07/05 职场文书
单位租房协议书范本
2014/12/04 职场文书
初二学生评语大全
2014/12/26 职场文书
预备党员半年考察意见
2015/06/01 职场文书
2016年三严三实党课学习心得体会
2016/01/06 职场文书
慰问信的写作格式及范文!
2019/06/24 职场文书
LayUI+Shiro实现动态菜单并记住菜单收展的示例
2021/05/06 Javascript
MySQL空间数据存储及函数
2021/09/25 MySQL