这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了 DOM 基础教程之事件对象的相关资料, 需要的朋友可以参考下
浏览器中的事件都是以对象的形式存在的,同样 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;
- }
浏览器在获取了事件的对象后就可以通过它的一系列属性和方法处理各种事件了,例如鼠标事件,键盘事件和浏览器事件。等
以下罗列了常用的属性和方法:
从以上可以看出,两类浏览器还是有一些相似之处,例如 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;
这种方法在其它属性中也是常用的。
来源: http://www.phperz.com/article/17/0715/273209.html