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

tianyazjq110

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

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

dom的一些属性和方法
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.onclick=handleEvent;
oEvent.onmouseover=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 ievar oTarget=oEvent.srcElement;
//for DOMvar oTarget=oEvent.target;
注意的是：MAC上的IE同时支持srcElement和target;
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.停止事件复制

//for ieoEvent.cancelBubble=true;//for DomoEvent.stopPropagation();

事件的类型

鼠标事件


键盘事件


ＨＴＭＬ事件


突变事件

对于mouseover和mouseout事件

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

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



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

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

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




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

用户按下一个字符键不放，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];                }                            }