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 相关文章推荐
boxy基于jquery的弹出层对话框插件扩展应用 弹出层选择器
Nov 21 Javascript
jquery跟js初始化加载的多种方法及区别介绍
Apr 02 Javascript
javascript表单验证和Window详解
Dec 11 Javascript
jQuery使用Selectator插件实现多选下拉列表过滤框(附源码下载)
Apr 08 Javascript
jQuery获取父元素节点、子元素节点及兄弟元素节点的方法
Apr 14 Javascript
jQuery Validate设置onkeyup验证的实例代码
Dec 09 Javascript
微信小程序实现图片自适应(支持多图)
Jan 25 Javascript
Vue监听数组变化源码解析
Mar 09 Javascript
VUE中的无限循环代码解析
Sep 22 Javascript
Angular.js中window.onload(),$(document).ready()的写法浅析
Sep 28 Javascript
Bootstrap 实现表格样式、表单布局的实例代码
Dec 09 Javascript
JavaScript 性能提升之路(推荐)
Apr 10 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 动态随机生成验证码类代码
2010/04/09 PHP
php mssql扩展SQL查询中文字段名解决方法
2012/10/15 PHP
php中OR与|| AND与&amp;&amp;的区别总结
2013/10/26 PHP
mysql查找删除重复数据并只保留一条实例详解
2016/09/24 PHP
PHP实现表单提交数据的验证处理功能【防SQL注入和XSS攻击等】
2017/07/21 PHP
PHP迭代与递归实现无限级分类
2017/08/28 PHP
JavaScript 基于原型的对象(创建、调用)
2009/10/16 Javascript
js的写法基础分析
2011/01/17 Javascript
基于jquery的blockui插件显示弹出层
2011/04/14 Javascript
JS Replace()的高级使用方法介绍
2013/06/29 Javascript
javascript元素动态创建实现方法
2015/05/13 Javascript
基于jquery实现弹幕效果
2016/09/29 Javascript
jQuery用noConflict代替$的实现方法
2017/04/12 jQuery
关于layui的动态图标不显示的解决方法
2019/09/04 Javascript
详解Angular Karma测试的持续集成实践
2019/11/15 Javascript
js 计数排序的实现示例(升级版)
2020/01/12 Javascript
jQuery实现高度灵活的表单验证功能示例【无UI】
2020/04/30 jQuery
Python linecache.getline()读取文件中特定一行的脚本
2008/09/06 Python
Python入门篇之正则表达式
2014/10/20 Python
python异步存储数据详解
2019/03/19 Python
python调用webservice接口的实现
2019/07/12 Python
python自动脚本的pyautogui入门学习
2020/04/01 Python
全球摩托车装备领导者:RevZilla
2017/09/04 全球购物
世界上最受欢迎的花店:1-800-Flowers.com
2020/06/01 全球购物
检察官就职演讲稿
2014/01/13 职场文书
教师试用期自我鉴定
2014/02/12 职场文书
毕业生欢送会主持词
2014/03/31 职场文书
应用外语系自荐信
2014/06/26 职场文书
工商管理专业毕业生自我鉴定2014
2014/10/04 职场文书
建党伟业电影观后感
2015/06/01 职场文书
捐款仪式主持词
2015/07/04 职场文书
初中生物教学随笔
2015/08/15 职场文书
《我要的是葫芦》教学反思
2016/02/18 职场文书
CSS实现漂亮的时钟动画效果的实例代码
2021/03/30 HTML / CSS
vue组件的路由高亮问题解决方法
2021/05/11 Vue.js
Win10服务全部禁用了怎么启动?Win10服务全部禁用解决方法
2022/09/23 数码科技