Good good study, day day up!!

javascript学习笔记

转自Blogjava:http://www.blogjava.net/amigoxie/archive/2007/08/27/139711.html

一.今天的事件

 事件DOM的一部分,在DOM Level1中未定义任何事件,在Level中定义了一小部分子集,完整的事件是在Level3中规定的,该标准在2004年最终定案。

 Mozilla的事件模式与DOM标准最为接近,IE成为唯一一个对DOM事件模式缺乏良好支持的浏览器。

 

二.事件流

 事件流意味着在页面上可有不仅一个,甚至多个元素响应同一个事件。

1.       冒泡型事件

IE上的解决方案的绰号为冒泡的技术。冒泡型事件的基本思想是,时间按照最特定的目标到最不特定的事件目标的顺序触发。

IE6.0中,<html/>元素也可接收冒泡的时间。

2.       捕获型事件

Netscape Navigator4.0使用了捕获型事件的解决方案。事件从最不确定的对象(document对象)开始触发,然后到最精确。

3DOM事件流

       DOM同时支持两种事件模型:捕获型事件和冒泡型事件,但是,捕获型事件先发生。两种事件流会触发DOM中的所有对象,从document对象开始,也在document对象结束。

       DOM事件模型的最独特的性质是,文本节点也触发事件(在IE中不会)。

 

三.时间处理函数/监听函数

事件是用户或浏览器自身进行的特定行为。这些事件都有自己的名字,如clickload等。用于响应某个事件而调用的函数称为事件处理函数

       如果是JavaScript中分配的事件处理函数,则需要首先获得要处理对象的引用,然后将函数赋值给事件处理函数属性,eg1.

用这个分配方法,事件处理函数必须小写,才能正确响应事件。

       var oDiv = document.getElementById(“div1”);
       oDiv.onclick 
= function() {
       alert(“I was clicked.”);
}

      

       Eg2. <div onclick=”alert(‘I was clicked.’)”></div>

在例二中,事件处理函数的大小写可以任意

1.       IE

IE中,每个元素和window对象都有两个方法:attachEvent()detachEvent()attachEvent()用来给一个事件附加事件处理函数。而detachEvent()用来将事件处理函数分离出来。Eg.

var fnClick = function() {
              alert(“Clicked
!”);
       }

       
var oDiv = document.getElementById(“div1”);
       oDiv.attachEvent(“onclick”, fnClick);
       oDiv.detachEvent(“onclick”, fnClick);

 

2.       DOM

DOM方法addEventListener()removeEventListener()用来分配和移除事件处理函数。与IE不同,这些方法需要三个参数:事件名称、要分配的函数和处理函数用于冒泡阶段(为false时)还是捕获阶段(为true时)。Eg.

oDiv. addEventListener (“onclick”, fnClick, false);

oDiv.removeEventListener (“onclick”, fnClick, false);

如果使用传统方法直接给事件处理函数属性赋值,事件处理函数将被添加到事件的冒泡阶段,eg.

oDiv.onclick = fnClick;

oDiv.removeEventListener (“onclick”, fnClick, false);

 

四.             事件对象

事件对象只在发生事件时才被创建,且只有事件处理函数才能访问。所有事件处理函数执行完毕后,事件对象就被销毁。

1.       定位

IE中,事件对象是window对象的一个属性event,也就是说,事件处理函数必须这样访问事件对象:

oDiv.onclick = function() {

        var oEvent = window.event;

}

Event对象只能在事件发生时访问。所有的事件处理函数执行完毕后,事件对象就被销毁。

2.       属性/方法

见页面233-235页,在此不详述。

3.       相似性

1) 获取事件类型

下面代码可在任何浏览器中获取事件的类型:

var sType = oEvent.type;

它返回“click”或“mouseover”之类的值。Eg.2) 获取按键代码

function handleEvent(oEvent) {
              
if (oEvent.type == “click”) {
       alert(“Clicked
!”);
}
 else if (oEvent.type == “mouseover”) {
       alert(“mouse over
!”);
}

}

oDiv.onclick 
= handleEvent;
oDiv.onmouseover 
= handleEvent;

 

Eg. var iKeyCode = oEvent.keyCode;

例如,Enter键的keyCode13,空格键的keyCode32,回退键为8.

3) 检测ShiftAltCtrl

Eg.   var bShift = oEvent.shiftKey;

        var bAlt = oEvent.altKey;

        var bCtrl = oEvent.ctrlKey;

4) 获取客户端坐标

Eg.  var iClientX = oEvent.clientX;

        var iClientY = oEvent.clientY;

5) 获取屏幕坐标

可用screenXscreenY属性来获取鼠标指针在计算机屏幕中的位置

var iScreenX = oEvent.screenX;

var iScreenY = oEvent.screenY;

4.区别

1)获取目标

 IE中:var oTarget = oEvent.srcElement;

 DOM兼容的浏览器中:var oTarger = oEvent.target;

2)获取字符代码

IE中:var iCharCode = oEvent.keyCode;

 DOM兼容的浏览器中:var iCharCode = oEvent.charCode;

3)阻止某个事件的默认行为

IE中:oEvent.returnValue = false;

 DOM兼容的浏览器中:oEvent.preventDefault();

4)阻止事件复制(冒泡)

IE中:oEvent.cancelBubble = true;

 mozilla中:oEvent.stopPropagation ();

 

五.事件的类型

DOM标准定义了以下几种事件:

      鼠标事件
     
键盘事件

      HTML事件:窗口发生变动或者发生特定的客户端-服务端交互时触发;

      突变事件:底层的DOM结构发生改变时触发。

1.       鼠标事件

Eg. clickdbclickmousedownmouseoutmouseovermouseupmouseover

1) 属性

Eg. 坐标属性(egclientXclientY等)、type属性、targetsrcElement属性、shiftKeyctrlKeyaltKeymetaKeyDOM)属性、button属性(只在mousedownmouseovermouseoutmouseovermouseup事件中)。

2) 顺序

在同一个目标上要按顺序发生以下事件: mousedown->mouseup->click->mousedown->mouseup->click->dbclick

2.       键盘事件

       键盘事件有:keydownkeypresskeyup

1) 事件的属性

对某个键盘事件,会填入如下的事件属性: keyCodecharCode(仅DOM)、target(DOM)或者srcElementIE)、shiftKeyctrlKeyaltKeymetaKeyDOM)属性。

2) 顺序

按下一个字符键,发生事件顺序为: keydown->keypress->keyup;

按下一个非字符键,发生事件顺序为:keydown->keyup

3.       HTML事件

HTML事件有: loadunloadaborterrorselectchangesubmitresetresizescrollfocusblur事件。

1) loadunload事件

eg. window.onload = function() {

        alert(“loaded!”);

}

2) resize事件

resize事件用来判断何时动态的改变某些元素。Eg.

<body onresize=”alert(‘Resizing’)”>

最大化或最小化窗口时,也会触发resize事件。

3) Scroll事件

Eg. <body onscroll=”alert(‘Scroll)”>

4.变化事件

    变化事件包括如下内容:

       DOMSubtreeModified——当文档或者元素的子树因为添加或删除节点而改变时触发;

       DOMNodeInserted——当一个节点作为另一个节点的子节点插入时触发;

       DOMNodeRemoved——当一个节点作为另一个节点的子节点删除时触发;

       DOMNodeRemovedFromDocument——当一个节点从文档中删除时触发;

      DOMNodeInsertedIntoDocument——当一个节点插入到文档中时触发。

    这些事件的目的是,提供一个独立于语言的事件范围,使其可使用在所有基于XML的语言中。

 

六.跨平台的事件

1. EventUtil对象

     var EventUtil = new Object;

2. 添加/删除事件处理函数3. 格式化event对象 

EventUtil.addEventHandler = function() {
        
if (oTarget.addEventListener) //对DOM兼容的浏览器
       oTarget.addEventListener(sEventType, fnHandler, false);
}
 else if (oTarget.attachEvent) //对IE
       oTarget.attachEvent("on" + sEventType, fnHandler);
}
 else {
       oTarget[
"on" + sEventType] = fnHandler;
}

}


EventUtil.removeHandler 
= function(oTarget, sEventType, fnHandler) {
        
if (oTarget.removeEventListener) //对DOM兼容的浏览器
               oTarget.removeEventListener(sEventType, fnHandler, false);
}
 else if (oTarget.detachEvent) //对IE
       oTarget.detachEvent("on" + sEventType, fnHandler);
}
 else {
       oTarget[
"on" + sEventType] = null;
}

}

 

     一种对付IEDOM中的event对象之间区别的最佳手段是,调整它们使之尽可能地表现相似,因为更多的浏览器使用的是DOM的事件类型,所以将IE的事件模型调整为接近于DOM事件模型就可以了。

    根据DOM属性/方法与IE属性/方法的不同,最后可得出如下的格式化event对象函数,如下所示:4. 获取事件对象

EventUtil.formatEvent = function(oEvent) {
        
if (isIE && isWin) {
       oEvent.charCode 
= (oEvent.type == "keypress"? oEvent.keyCode : 0;
       oEvent.eventPhase 
= 2;
       oEvent.isChar 
= (oEvent.charCode > 0);
       oEvent.pageX 
= oEvent.clientX + document.body.scrollLeft;
       oEvent.pageY 
= oEvent.clientY + document.body.scrollTop;
       oEvent.preventDefault 
= function() {
       
this.returnValue = false;
}
;

if (oEvent.type == "mouseout"{
       oEvent.relatedTarget 
= oEvent.toElement;
}
 else if (oEvent.type == "mouseover"{
       oEvent.relatedTarget 
= oEvent.fromElement;
}

oEvent.stopPropagation 
= function() {
       
this.cancelBubble = true;
}
;
oEvent.target 
= oEvent.srcElement;
oEvent.time 
= (new Date()).getTime();
}

return oEvent;
}

 

      IEDOM使用不同的方法来获取event对象。在IE中,event对象是与window对象相关的,而在DOM中,它独立于任何其他对象,并且是作为参数传递的。下面我们编写一个通用的获取event对象的函数,代码如下:    调用举例如下:七.  小结

EventUtil.getEvent = function() {
       
if (window.event) {
       
return this.formatEvent(window.event);
}
 else {
       
return EventUtil.getEvent.caller.arguments[0];
}

}

 

oDiv.onclick = function() {
        
var oEvent = EventUtil.getEvent();
}

 

     本章详细介绍了JavaScript中事件、事件流的概念,详细研究了event对象,最后一节还创建了一个跨浏览器事件库,可使用同一套方法来访问事件对象,添加/删除事件处理函数,而无需考虑浏览器检测的问题。

阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/lifaming15/article/details/1799558
上一篇软件如何去获得好的评价
下一篇WebLogic RMI 编程(一)
想对作者说点什么? 我来说一句

javascript 学习笔记

2009年04月21日 40KB 下载

JavaScript学习笔记

2011年11月13日 272KB 下载

个人Javascript学习笔记 精华版

2009年05月27日 71KB 下载

js 笔记 javascript 学习笔记

2011年11月28日 3KB 下载

JS学习笔记(全)

2016年03月31日 73KB 下载

107条javascript语句

2010年06月25日 49KB 下载

没有更多推荐了,返回首页

关闭
关闭