javaScript中的事件

<!DOCTYPE html>
<html onclick="alert('冒泡test4')">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>dom事件流模型测试（IE）</title>
</head>
<script>
    window.addEventListener("冒泡click",function(){
        alert("test5");
    });
    /*
    //按下键后会一直执行
    window.addEventListener("keydown",function(e){
        console.log("======"+e.keyCode);
    });

    */
        window.addEventListener("keypress",function(e){
            console.log(e.type+"======"+e.keyCode+"--"+e.charCode);
            var div=document.getElementById("fj");
            //style属性可以获得html标签的样式，但是不能获取非行间样式，获取行间样式。
            //moz:getComputedStyle(div,false)[attr]
            //IE: currentStyle[attr]
            //
            var top=div.style.top,
                cTop=div.currentStyle?parseInt(div.currentStyle["top"]):parseInt(getComputedStyle(div,true)["top"]),
                cLeft=div.currentStyle?parseInt(div.currentStyle["left"]):parseInt(getComputedStyle(div,true)["left"]),
                v= 1,
                left=div.style.left;
            switch(e.charCode){
                case 119://W 上
                   if(div.currentStyle){
                       div.style.top=(parseInt(div.currentStyle["top"])-v)+"px";
                   }else{
                       div.style.top=(parseInt(getComputedStyle(div,false)["top"])-v)+"px";
                   }
                   console.log(top+"---------sss------------"+cTop);

                  // top= (cTop- v) + "px";
                    break;
                case 115://s 下
                    if(div.currentStyle){
                        div.style.top=(parseInt(div.currentStyle["top"])+v)+"px";
                    }else{
                        div.style.top=(parseInt(getComputedStyle(div,false)["top"])+v)+"px";
                    }
                    break;
                case 97://A左
                    if(div.currentStyle){
                        div.style.left=(parseInt(div.currentStyle["left"])-v)+"px";
                    }else{
                        div.style.left=(parseInt(getComputedStyle(div,false)["left"])-v)+"px";
                    }
                    break;
                case 100://D 右
                    if(div.currentStyle){
                        div.style.left=(parseInt(div.currentStyle["left"])+v)+"px";
                    }else{
                        div.style.left=(parseInt(getComputedStyle(div,false)["left"])+v)+"px";
                    }
                    break;
            }
        });


        window.addEventListener("keyup",function(e){ //释放按键时一直触发
            console.log(e.type+"======"+e.keyCode);
            var div=document.getElementById("fj");
            var zd=document.createElement("div");
            zd.style.background="#FF0000";
            zd.style.width="5px";
            zd.style.height="5px";
            zd.style.position="absolute";
            var content=document.getElementById("content");
            if(e.keyCode==76){//L
                if(div.currentStyle){
                    zd.style.left=(parseInt(div.currentStyle["left"])+10)+"px";
                    zd.style.top=(parseInt(div.currentStyle["top"])-20)+"px";
                }else{
                    zd.style.top=(parseInt(getComputedStyle(div,false)["top"])-20)+"px";
                    zd.style.left=(parseInt(getComputedStyle(div,false)["left"])+10)+"px";
                }
                console.log(zd.style.top+"||"+zd.style.left);

                content.appendChild(zd);
                setInterval(function(){
                    if(parseInt(getComputedStyle(zd,false)["top"])==0){
                        clearInterval();
                       //content.removeChild();
                    }else{
                        zd.style.top=(parseInt(getComputedStyle(zd,false)["top"])-2)+"px";
                    }
                },100)
            }

        });
    /**
     * Dom事件流标准包含：事件冒泡和事件捕获
     * 事件流：不仅一个甚至多个元素响应同一事件。
     * 事件冒泡：<源于IE>
     *      最特定的事件目标(DOM:text)----->最不特定的目标（IE4:document,DOM:window）顺序触发;
     * 事件捕获：<源于Mozille>
     *      最不精确的（Mozille:window,DOM:window）----------->最精确的目标(DOM:text)顺序触发;
     *      (不会讲很多的元素暴露给事件)
     * 事件冒泡模型：
     *
     *                                  test5(window)------|
     *                                  ^                  |
     *                                  |                  |
     *   冒泡                       test4(html<document>) <-|         捕获
     *                              ^       |
     *                              |       |
     *                        test3(body)<--|
     *                        ^             |
     *                        |             |
     *                   test2(parent_div)<-|
     *                   ^                  |
     *                   |                  |
     *(点击test的div) test（div)   <---------|
     *
     *  --------------
     *  事件注册方法：|
     *  -------------
     *  1 html 默认的是冒泡
     *  2 js
     *     DOM：
     *     ----注册事件-----
     *     参数： evnetName:string 事件名
     *           fn:function 事件处理回调函数，参数event对象
     *           useCapture：boolean false：不用捕获用冒泡 ,true :用捕获不用冒泡
     *     ele.addEventListener(eventName,fn,useCapture);
     *     ----移除事件-----
     *     参数：同注册事件
     *     ele.removeEventListener(eventName,fn,useCapture)
     *
     *     IE：
     *     ----注册事件----- (只有冒泡)
     *     参数： evnetName:string 事件名
     *           fnHandler:function 事件处理回调函数，参数event对象
     *     ele.attachEvent(eventName,fnHandler);
     *     ----移除事件-----
     *     参数：同注册事件
     *     ele.detachEvent(eventName,fnHandler)
     *     //一个元素一个事件绑定多个处理函数顺序执行
     *
     *     //阻止事件冒泡的方法:
     *
     *    ----------
     *    事件对象 -|
     *    ----------
     *   事件对象：捕获事件的信息。
     *   包含信息：
     *   1--引起事件的对象
     *   2--事件发生时鼠标的信息
     *   3--事件发生时键盘的信息
     *   时空(生命期和作用域)：
     *   1--创建，只能在事件发生时创建
     *   2--销毁，事件处理函数执行完毕后销毁
     *   3--作用域，只有事件处理函数才能访问
     *   IE和DOM事件对象的异同：
     *   相同点:
     *   1 获取事件类型：oEvent.type
     *   2 获取按键代码（keydown/keyup）：oEvent.keyCode
     *      keyCode总包含代表按下按键的一个代码，他可能是一个字符，也可能不是。
     *   3 检测shift、alt、ctrl键:
     *          检测是否被按下：boolean
     *          oEvent.shiftKey;
     *          oEvent.altKey;
     *          oEvent.ctrlKey;
     *   4 获取客户端坐标：
     *         在鼠标事件中，可用clientX和clientY属性获取鼠标指针在客户端区域的位置。
     *         oEvent.clientX;
     *         oEvent.clientY;
     *   5 获取屏幕坐标：
     *        鼠标事件中，可以用screenX和clientY属性获取鼠标指针在计算机屏幕中的位置。
     *        oEvent.screenX;
     *        oEvent.clientY;
     *   不同点：
     *   1 获取目标 ：
     *       IE：oEvent.srcElement;
     *       DOM:oEvent.target;
     *   2 获取字符代码 :
     *       IE:oEvent.keyCode;//返回字符代码的Unicode值
     *       DOM: oEvent.keyCode;//获取实际的字符
     *            String.fromChatCode(oEvent.charCode);//获取实际的字符
     *       如果不确定是否包含字符：
     *             if(oEvent.isChar){//判断
     *
     *             }
     *   3 阻止某个事件的默认行为 ：
     *          IE：oEvent.returnValue=false;     I
     *          Mozilla:oEvent.preventDefault();
     *          eg.1 右键阻止使用上下文菜单：
     *              document.body.oncontextmenu=function(){
     *                  if(isIE){
     *                     oEvent=window.event;
      *                    oEvent.returnValue=false;
     *                  }else{
     *                     oEvent.preventDefault();
     *                  }
     *              }
     *   4 停止事件复制（冒泡）：
     *       阻止事件进一步冒泡
     *       IE：oEvent.cancelBubble=true;
     *       moz:oEvent.stopPropagation();I
     *
     *  ----------
     *  事件类型  |
     *  ----------
     *  鼠标事件：
     *   事件：
     *   click
     *   dbclick
     *   mouseDown
     *   mouseout
     *   mouseover
     *   mouseup
     *   mousemove
     *   属性：
     *   坐标属性-
     *   type属性-
     *   target(DOM)或srcElement（IE）属性-
     *   shiftkey、ctrlkey、aletKey和metaKey(DOM)属性
     *   button属性（只有在mousedown / mouseover/mouseout/mouseove/mouseup）
     *   事件顺序：
     *   mousedown-->mouseup-->click-->mousedown-->mouseup-->click-->dbclick
     *  键盘事件：
     *    事件：
     *    keydown ：按下某键时发生。一直按着，就会不断触发
     *    keypress：按下某键，并上升一个字符时发生（也不管类似shift的键）。
     *              一直按会持续发生。
     *    keyup：释放按键时发生。
     *    属性：
     *    keyCode属性-
     *    charCode属性(仅DOM)-
     *    target(DOM)或者srcElement（IE）属性-
     *    shiftKy ctrlKey altKey metaKey(DOM)属性-
     *    顺序：
     *    keydown->keypress->keyup
     *    //如果用户按一次某非字符按键（例如 shift）
     *    keydown->keyup
     *    //如果按着字符键且不放，keydown和keypress事件将诸葛持续触发，知道松开。
     *  Html事件：
     *    load:页面完全加载后，在window对象上触发。所有的框架都载入后，
     *          在框架集上触发；<img/>完全载入后触发；<object/>元素，
     *          当其完全载入后在其上触发。
     *    unload：完全卸载后触发。
     *    abort：用户停止下载过程时，如果<object/>对象还未完全载入，就在其上触发。
     *    error：js脚本出错时，在window对象上触发；<img/>无法载入触发，
     *          <object/>元素无法载入，框架集中一个或多个无法载入时触发。
     *    select：
     *          用户选择了文本框中的一个或多个字符时触发(<input>/<textarea>)
     *    change:
     *       <input/>或<textarea/>失去焦点时并且获取焦点后内容发生改变
     *       时触发。<select/>元素的值发生改变时触发。
     *    submit ：<input type='submit'/>点击时，在<from/>上触发。
     *    reset ：<input type='reset'/>
     *    resize: 窗口或者框架的大小发生改变时触发。
     *    scroll：用户在任何带滚动条的元素上卷动它时触发。<body/>元素
     *          包含载入页面的滚动条。
     *    focus: 任何元素或者窗口本身获取焦点时（用户点击它、Tab键切换到
     *          它或者任何其他与它交互的手段）触发。
     *    blur:任何元素或者窗口本身失去焦点时
     *  突变事件（DOM标准的一部分，但是目前没有主流浏览器实现）：
     *
     */
</script>
<body onclick="alert('冒泡test3')">
    <div onclick="alert('冒泡test2')">
       <div onclick="alert('冒泡test');">冒泡test</div>
    </div>
    <div id="test1">
    <div id="test">捕获test</div>
    </div>
    <script>
        document.getElementById("test").addEventListener("click",function(e){
            alert("捕获test");
        },true);
        document.getElementById("test").addEventListener("click",function(e){
            alert("冒泡test");
        },false);
        document.getElementById("test1").addEventListener("click",function(e){
            alert("捕获test1");
        },true);
    </script>
    <div style="width:200px;height:200px;border: 2px #ff0000 solid" id="content">
          <div id="fj" style="position: absolute;top:200px;left:90px;background:#1dc116;height: 20px;width: 20px; ">
          </div>
    </div>

</body>
</html>

例子：

http://www.oschina.net/question/54100_25614