javascript高级编程第9章笔记(事件)

[size=large][/size]定位
//for ie
oDiv.οnclick=function(){
var oEvent=window.event;
}
//for Dom
oDiv.οnclick=function(){
var oEvent=arguments[0];
}
//可直接命名参数，访问就更方便
oDiv.οnclick=function(oEvent){
//for some code;

}

[color=red]ie事件的一些属性及方法[/color]
altKey true代表按下alt键，false代表没有;
button 0 未按下按纽
1 按下左键;
2........
3.按下左右键;
4.按下中间的
5.按下左中的
6.按下右中的
7.按下左中右的
cancelBubble true时，将会停止事件向上冒泡．
clienX 事件发生时，鼠标在客户端区域的X坐标(不包括工具栏，滚动条)
offsetX 鼠标相对于引起事件的对象的X坐标;

[color=red]dom的一些属性和方法[/color]
currentTarget 事件目前所指向的元素；
detail 鼠标点击的次数;
eventPhase 0　捕获阶段 1 在目标上 2　冒泡阶段;
preventDefault() 阻止事件的默认行为;
relatedTarget 事件的第二目标，经常用于鼠标事件;
stopPropagation()可调用这个方法阻止将来事件的冒泡；

//IE跟DOM相似性
var sType=oEvent.type;
//for example
function handleEvent(oEvent){
if(oEvent.type=="click")
{
alert("Cliked");
}else(oEvent.type=="mouseover"){
alert("Mouse Over");
}

}
oEvent.οnclick=handleEvent;
oEvent.οnmοuseοver=handleEvent;

2.获取按键代码
var iKeyCold=oEvent.keyCode;
回车 KeyCode 13;
空格键 KeyCode 32;
回退 KeyCode 8;

3.检测shift,alt,ctrl
var bshift=oEvent.shiftKey;
var bAlt=oEvent.altKey;
var bCtrl=oEvent.ctrlKey;

4.客户端坐标
var iClientX=oEvent.clientX;
var iClientY=oEvent.clientY;
5.屏幕坐标
var iScreenX=oEvent.screenX;
var iScreenY=oEvent.screenY;

ie跟dom浏览器的一些区别

//for ie
var oTarget=oEvent.srcElement;

//for DOM
var oTarget=oEvent.target;

[color=red]注意的是：MAC上的IE同时支持srcElement和target;[/color]
2.获到字符代码
//for ie

var iCharCode=oEvent.keyCode;

//for Dom

var iCharCode=oEvent.charCode;

3.阻止事件的默认行为
//for ie
oEvent.returnValue=false;
//for Dom
oEvent.preventDefault();
//for example

 document.body.oncontextmenu=function(oEvent){
   if(isIe){
    oEvent=window.event;
    oEvent.returnValue=false;
  }else{
    oEvent.preventDefault();
  }
}

4.[size=large]停止事件复制[/size]

//for ie
oEvent.cancelBubble=true;
//for Dom
oEvent.stopPropagation();

[color=red][size=large]
事件的类型[/size][/color]

鼠标事件


键盘事件


ＨＴＭＬ事件


突变事件

对于mouseover和mouseout事件

mouseover下
ie的toElement==srcElement;
mouseout
ie的fromElement==srcElement;

Dom下
mouseover
relatedTarget指出鼠标来自何处;
mouseout
relatedTarget指出鼠标去往何处；

[color=red]

click事件发生前,先要mousedown---------->>mouseup-------->>click

dbclick则要mousedown------>>mouseup------->>click--->>mousedown-->>mouseup------>>click----->>dbclick

mouseout(离开一个)---->>两个对象都会发生mousemove-------->>mouseover(进入另外一个)


[/color]

======================================================

用户按下一个字符键不放，keydown和keypress事件会一直触发
keydown---keypress--keyup
用户按下一个非字符，eg:shift
则只有keydown事件持续触发；
keydown-----------keyup

======================================================

HTML事件

abort事件
用户停止下载过程时，如果object对象还未完全载入，则就在其上触发；

select事件

input,textarea选择了一个或者多个字符时触发;

change事件

input,textarea,先失去焦点并且在它获取焦点后内容发生了变化时触发；select元素的值发生改变时触发；


focus事件
得到焦点时触发

blur事件
失去焦点时触发

resize事件

resize事件的处理函数必须使用js代码分配给window对象或者在html中分配给body元素
//for ie
只要窗口移动就会触发
//for ff
只有等窗口的大小改变停止时，才会触发
最大化时，或者最小化时．resize事件会一直触发；

　
　最后附上一个兼容事件类库．
eventUtil.js

 //跨平台事件；
            var EventUtil = new Object;
            EventUtil.addEventHandler = function(oTarget, sEventType, fnHandler){
                if (oTarget.addEventListener) {
                    //dom标准事件处理函数,false参数指定为冒泡阶段
                    oTarget.addEventListener(sEventType, fnHandler, false);
                }
                else 
                    if (oTarget.attachEvent) {//for IE
                        oTarget.attachEvent("on" + sEventType, fnHandler);
                    }
                    else {//for others browser
                        oTarget["on" + sEventType] = fnHandler;
                    }
            }
            //移除一个对象的事件；
            EventUtil.removeEventHandler = function(oTarget, sEventType, fnHandler){
                if (oTarget.removeEventListener) {
                    //与上一样，指定为false才能正常去除事件；
                    oTarget.removeEventListener(sEventType, fnHandler, false);
                }
                else 
                    if (oTarget.detachEvent) {
                        oTarget.detachEvent("on" + sEventType, fnHandler);
                    }
                    else {
                        //other browser remove function;
                        oTarget["on" + sEventType] = null;
                    }
            }
            //---------------------------------------------------------------华丽的分割线------------------------------//
            //格式化event对象，让他们全面兼容ff and ie;
            EventUtil.formatEvent = function(oEvent){
                if (isIE && isWin) {
                    //IE中的字符代码是在keypress事件发生时，包含在keyCode属性中的．所以事件类型为keypress时，需要创建charCode属性，其值为keyCode;否则置它为0;
                    oEvent.charCode = (oEvent.type == "keypress") ? oEvent.keyCode : 0;
                    //eventPhase在DOM中代表所处的阶段，IE仅支持一个值为2,这个属性始终等于2代表冒泡阶段，因为IE仅支持此阶段；
                    oEvent.eventPhase = 2;
                    //ie不支持isChar属性，所以我们设定当charCode不为0时，为true;
                    oEvent.isChar = (oEvent.charCode > 0);
                    //ie不支持pageX,与pageY，不过可以通过clienX,clienY,的值及文档主体中的scrollLeft和scrollTop的值计算出他们；
                    oEvent.pageX = oEvent.clientX + document.body.scrollLeft;
                    oEvent.pageY = oEvent.clientY + document.body.scrollTop;
                    //下面是阻止默认动作；
                    oEvent.preventDefault = function(){
                        this.returnValue = false;
                        //此时this代表oEvent事件对象；
                    }
                    //然后就是Dom的relatedTarget属性即可能是IE的 fromElement也可能是toElement属性，这由事件类型决定；
                    if (oEvent.type == "mouseout") {
                        //要离开的地方；
                        oEvent.relatedTarget = oEvent.toElement;
                    }
                    else 
                        if (oEvent.type = "mouseover") {
                            //要去往的地方；
                            oEvent.relatedTarget = oEvent.fromElement;
                        }
                    //兼容事件的阻止默认行为,将IE的cancelBubble设置为true即可；
                    oEvent.stopPorpagation = function(){
                        oEvent.cancelBubble = true;
                    }
                    //然后是target属性，确切的说它等同于IE的srcElement;
                    oEvent.target = oEvent.srcElement;
                    //对于timestamp属性，创建一个Date对象，获取它的毫秒数即可；
                    oEvent.timestamp = (new Date()).getTime();

                }
                return oEvent;
            }
            //---------------------------------------------------------------华丽的分割线------------------------------//
            //获取事件对象；
            //IE和Dom使用不同的方法来获到event对象，ie是与window对象相关的，而在dom中它独立于其它对象，并且是作为参数传递的．
            EventUtil.getEvent = function(){
                if (window.event) {
                    return this.formatEvent(window.event);
                }
                else {
					//每个函数都有一个caller属性，它包含了调用它的方法的此用；被调用的自己又指回到自己的参数；
					//funcA调用funcB,那么funcB.caller指向到funcA;
                    return EventUtil.getEvent.caller.arguments[0];
                }

            }