javascript 事件模型学习笔记

 

< html >
     < head >
         < title > removeChild() Example </ title >
         < script type = " text/javascript " >
         function  removeMessage()
         ... {
            var op = document.body.getElementsByTagName("p")[0];
            document.body.removeChild(op);
        }
         function  replaceMessage()
         ... {
            var op = document.createElement("p");
            var oText = document.createTextNode("hello universe!");
            op.appendChild(oText);
            var oldOp = document.getElementsByTagName("p")[0];
            oldOp.parentNode.replaceChild(op,oldOp);
        }
         function  appendMessage()
         ... {
            var op = document.createElement("p");
            var oText = document.createTextNode("hello universe two !");
            op.appendChild(oText);
            document.body.appendChild(op);
        }
         function  insertMessage()
         ... {
            var op=document.createElement("p");
            var oText = document.createTextNode("hello insert before");
            op.appendChild(oText);
            var oldOp = document.body.getElementsByTagName("p")[0];
            oldOp.parentNode.insertBefore(op,oldOp);
        }
         function  getUserAgent()
         ... {
            var sUserAgent = navigator.userAgent;
            var appVersion = parseFloat(navigator.appVersion);
            alert(sUserAgent);
            alert(appVersion);
        }
         function  handleEvent()
         ... {
            var oDiv = document.getElementById("div1");
            oDiv.onclick=function()
            ...{
                alert("I was clicked!");
            }
            //用这种分配事件的形式,事件响应函数的名字必须为小写的.
        }
         // IE中,attachEvent(),detachEvent()，在ＩＥ中，每个元素和window对象都有这两个方法
         var  fnclick1 = function ()
         ... {
            alert("I am clicked!");
        }
         var  fnclick2 = function ()
         ... {
            alert("I am also clicked!");
        }
         var  addIeEvent = function ()
         ... {
            var oDiv = document.getElementById("div1");
            oDiv.onclick=fnclick1;
            oDiv.attachEvent("onclick",fnclick2);
        }
         function  addDomEvent()
         ... {
            var oDiv = document.getElementById("div1");
            oDiv.addEventListener("click",fnclick1,true);
            oDiv.addEventListener("click",fnclick2,true);
            oDiv.addEventListener("click",fnclick1,false);
            oDiv.addEventListener("click",fnclick2,false);
        }
         // DOM中，addEventListener(),removeEventListener()用于分配和移除事件处理函数，
         // 第三个参数为true时，事件处理函数用于捕获阶段，为false时，用于冒泡阶段．
         // IE , DOM区别是很大的
         function  getIeEvent()
         ... {
            var oEvent = window.event;
            alert(oEvent.type);
        }
         // 在IE中，event对象是window对象的一个属性。
         // DOM中，访问的方式是不一样的
         function  getDomEvent()
         ... {
            var oEvent = arguments[0];
        }
         // 当然，更方便的方式是直接的命名参数
         function  getDomEvent(oEvent)
         ... {
        }
         // oEvent.type 可以获取到事件的类型
        
         // 获取按键的代码（keydown／keyup事件）
         var  iKeyCode  =  oEvent.keyCode;

         // 检测shift，alt，ctrl是否被按下，下面的方法都是返回布尔值
         var  bShift  =  oEvent.shiftKey;
         var  bAlt  =  oEvent.altKey;
         var  bCtrl  =  oEvent.ctrlKey;

         // 获取客户端坐标
         var  iClientX  =  oEvent.clientX;
         var  iClientY  =  oEvent.clienty;
         // 获取屏幕坐标
         var  iScreenX  =  oEvent.screenX;
        VAR iScreenY  =  oEvent.screenY;

         // 获取事件源
         var  oTarget  =  oEvent.srcElement;  //   IE
         var  oTarget  =  oEvent.target;    //   DOM

         // 获取字符代码
         var  iCharCode  =  oEvent.keyCode;    // IE
         var  iCharCode  =  oEvent.charCode;    // DOM

         // 阻止某个事件的默认行为
        oEvent.returnValue  = false ; // IE
        oEvent.preventDefault();   // DOM

         // for example
        document.body.oncontextmenu  =   function (oEvent)
         ... {
            if(isIE)
            ...{    
               oEvent = window.event;
               oEvent.returnValue =false;
            }
            else
            ...{
                oEvent.preventDefault();
            }
        }
         // 键盘事件：
         // keydown-----用户在键盘上按下某按键的时候发生．
         // keypress----用户按下一个按键，并产生一个字符时候发生（也就是不管shift，alt之类的键）
         // keyup------用户释放按着的按键发生
         </ script >
     </ head >
     < body onload = " getIeEvent() " >
         < p > hello world !</ p >
         < div id = " div1 " > 实打实的 </ div >
     </ body >
</ html >

 

ajax in practise :

The Basic Event Model, also informally known as the DOM Level 0 Event
Model, which is fairly easy, straightforward, and reasonably cross-platform.
■ The DOM Level 2 Event Model, which provides more flexibility but is
supported only on standards-compliant browsers such as Firefox, Mozilla,
and Safari.
■ The Internet Explorer Event Model, which is functionally similar to the
DOM Level 2 Model, but which is proprietary to Internet Explorer.