JS事件流、DOM事件流、IE事件處理、跨瀏覽器事件處理、事件對象與類型

時間 2020-02-09

原文原文鏈接

事件的移除javascript

removeEventListener()css

第二個參數須要指定要移除的事件句柄，不能是匿名函數，由於沒法識別html

想要移除成功，那麼三個參數必須跟addEventListener中的三個徹底一致java

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            width:100%;
            height:100%;
        }
        input{
            display: block;
            margin-bottom:10px;
        }
        .active{
            color:orange;
        }
    </style>
    <script src="DomReady.js"></script>
    <script>
        myReady(function(){

            var btn1 = document.querySelector("#btn1");

            function click1(){
                alert("hello1~");
            }

            btn1.addEventListener("click", click1, false);    

            //移除綁定的事件
            btn1.removeEventListener("click", click1, false);                

        });
    </script>
</head>
<body>

    <button id="btn1">按鈕1</button>

</body>
</html>

IE事件流jquery

attachEvent(event, function) event都是on開頭的windows

瀏覽器兼容性主要就是指IE瀏覽器的兼容，尤爲是低版本IE（IE6-8）數組

IE不支持事件捕獲，默認都是冒泡，因此沒有第三個參數瀏覽器

detachEvent() 移除事件緩存

DOM0級兼容全部瀏覽器app

DOM2級

addEventListener 主要兼容谷歌、火狐、IE9+

attachEvent 主要兼容IE6-8

attachEvent 能夠綁定多個事件類型，並且後綁定的先執行

還有一個很逆天的知識點補充，匿名函數中的this指向window

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            width:100%;
            height:100%;
        }
        input{
            display: block;
            margin-bottom:10px;
        }
        .active{
            color:orange;
        }
    </style>
    <script src="DomReady.js"></script>
    <script>
        myReady(function(){

            var btn1 = document.querySelector("#btn1");

            function click1(){
                alert("hello1~");
            }

            function click2(){
                alert("hello2~");
            }

            btn1.attachEvent("onclick", click1);
            btn1.attachEvent("onclick", click2);    //先彈出hello2，再彈出hello1    

            //移除綁定的事件
            btn1.detachEvent("onclick", click1);    //解除綁定hello1，只彈出hello2    

            //this指向window
            btn1.attachEvent("onclick", function(){
                alert(this===window);//true
            });        

        });
    </script>
</head>
<body>

    <button id="btn1">按鈕1</button>

</body>
</html>

跨瀏覽器事件處理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            width:100%;
            height:100%;
        }
        input{
            display: block;
            margin-bottom:10px;
        }
        .active{
            color:orange;
        }
    </style>
    <script src="DomReady.js"></script>
    <script>
        myReady(function(){

            var EventUtil={
                addHandler:function(ele, type, handler){
                    if(ele.addEventListener){
                        ele.addEventListener(type, handler, false);
                    }else if(ele.attachEvent){
                        ele.attachEvent("on"+type, handler);
                    }else{
                        ele["on"+type]=handler;
                    }
                },
                removeHandler:function(ele, type, handler){
                    if(ele.removeEventListener){
                        ele.removeEventListener(type, handler, false);
                    }else if(ele.detachEvent){
                        ele.detachEvent("on"+type, handler);
                    }else{
                        ele["on"+type]=null;
                    }
                }
            }

            var btn1=document.getElementById("btn1");
            var click=function(){
                alert("我被點擊啦！");
            }
            EventUtil.addHandler(btn1, "click", click);
            EventUtil.removeHandler(btn1, "click", click);
        });
    </script>
</head>
<body>

    <button id="btn1">按鈕1</button>

</body>
</html>

事件冒泡與事件捕獲

直系親屬樹

事件冒泡：當某個元素的點擊事件被觸發以後，因爲冒泡，它的直系親屬樹上的元素，只要被添加了事件的，都會被觸發（從下往上）

事件捕獲：當某個元素的點擊事件被觸發以後，因爲捕獲，它的直系親屬樹上的元素，只要被添加了事件的，都會被觸發（從上往下）

大部分狀況下，都是使用事件冒泡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            width:100%;
            height:100%;
        }
        input{
            display: block;
            margin-bottom:10px;
        }
        .active{
            color:orange;
        }
    </style>
    <script src="DomReady.js"></script>
    <script>
        myReady(function(){

            var parent=document.getElementById("parent");
            var child=document.getElementById("child");

            //事件冒泡，先出現child，再出現parent
            parent.addEventListener("click", function(){
                alert("parent");
            });
            child.addEventListener("click", function(){
                alert("child");
            });

            //事件捕獲，先出現parent，再出現child
            // parent.addEventListener("click", function(){
            //     alert("parent");
            // }, true);
            // child.addEventListener("click", function(){
            //     alert("child");
            // }, true);
        });
    </script>
</head>
<body>

    <div id="parent">
        <div id="child">點擊child</div>
    </div>

</body>
</html>

利用事件冒泡機制實現事件委託

事件綁定會損耗性能，事件委託是一個很棒棒的選擇

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            width:100%;
            height:100%;
        }
        input{
            display: block;
            margin-bottom:10px;
        }
        .active{
            color:orange;
        }
    </style>
    <script src="DomReady.js"></script>
    <script>
        myReady(function(){

            var ul=document.getElementById("ul");

            // 父 ul 綁定事件
            // 子 li 沒有事件
            // 當子元素（li）被點擊時，在子元素直系親屬樹上的全部元素，凡是綁定了事件的（ul）都會被觸發
            ul.addEventListener("click", function(event){
                // event,target能夠獲取到點擊的那個元素
                console.log(event.target.innerHTML);

                if(event.target.id==="li1"){
                    alert("是1哦");
                }else if(event.target.id==="li2"){
                    alert("是2哦");
                }else if(event.target.id==="li3"){
                    alert("是3哦");
                }else if(event.target.id==="li4"){
                    alert("是4哦");
                }
            });
        });
    </script>
</head>
<body>

    <ul id="ul">
        <li id="li1">li1</li>
        <li id="li2">li2</li>
        <li id="li3">li3</li>
        <li id="li4">li4</li>
    </ul>

</body>
</html>

w3c 制定的 javascript 標準事件模型，先事件捕獲從windows > document 往下級直到特定的事件節點，而後進行事件處理，再事件冒泡，從特定節點往上級，這個完整的過程。

事件捕獲->事件處理->事件冒泡

event對象經常使用的屬性和方法

事件句柄的參數event對象

event.type 事件類型

event.target 被點擊的元素

event.currentTarget 被綁定事件的元素

event.preventDefault() 阻止默認行爲

event.stopPropagation() 阻止事件捕獲或者冒泡，須要添加到子元素上

clientY 瀏覽器頂部底邊到鼠標的位置

pageY 瀏覽器頂部底邊到鼠標的位置+頁面滾動的距離

screenY 屏幕頂部到鼠標的位置（若是瀏覽器縮小，screenY依然是根據電腦屏幕來計算，與瀏覽器無關）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            width:100%;
            height:100%;
        }
        #scroll{
            height:1000px;
            background:#abcdef;
        }
    </style>
    <script src="DomReady.js"></script>
    <script>
        myReady(function(){

            var ul=document.getElementById("ul");
            ul.addEventListener("click", function(event){
                console.log(event.type);//click
                console.log(event.target);//<li id="li3">li3</li>
                console.log(event.currentTarget);
                /*
                <ul id="ul">
                    <li id="li1">li1</li>
                    <li id="li2">li2</li>
                    <li id="li3">li3</li>
                    <li id="li4">li4</li>
                </ul>
                */
                            
                alert(event.target.innerHTML);

            });

            var a=document.getElementById("a");
            a.addEventListener("click", function(event){
                event.preventDefault();//阻止了a連接的跳轉
                alert("hello");
            })

            //阻止子元素執行時冒泡到父元素
            var parent=document.getElementById("parent");
            var child=document.getElementById("child");
            parent.addEventListener("click", function(event){
                alert("parent");
                event.stopPropagation();

            });
            child.addEventListener("click", function(event){
                alert("child");
                event.stopPropagation();
            });


            var scroll=document.getElementById("scroll");
            scroll.addEventListener("click", function(event){
                
                console.log(event.pageY);//813
                console.log(event.clientY);//480
                console.log(event.screenY);//535
            })
            
        });
    </script>
</head>
<body>

    <ul id="ul">
        <li id="li1">li1</li>
        <li id="li2">li2</li>
        <li id="li3">li3</li>
        <li id="li4">li4</li>
    </ul>

    <a id="a" href="http://www.baidu.com">點擊連接</a>

    <div id="parent">
        <div id="child">這是兒子</div>
    </div>

    <div id="scroll">這是滾動區域</div>
</body>
</html>

IE中的event對象（attachEvent）

event.type 事件類型

event.returnValue=false; 阻止默認行爲

event.cancelBubble=true; 阻止冒泡，須要添加到子元素上

event.srcElement 被點擊的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            width:100%;
            height:100%;
        }
        #scroll{
            height:1000px;
            background:#abcdef;
        }
    </style>
    <script src="DomReady.js"></script>
    <script>
        myReady(function(){

            var ul=document.getElementById("ul");
            ul.attachEvent("onclick", function(event){
                alert(event.type);//click    
                alert(event.srcElement.innerHTML);//點擊li1，彈出li1

            });

            var a=document.getElementById("a");
            a.attachEvent("onclick", function(event){
                //阻止默認行爲
                event.returnValue=false;
                alert("hello");
            });

            //阻止子元素執行時冒泡到父元素，須要添加到子元素上
            var parent=document.getElementById("parent");
            var child=document.getElementById("child");
            parent.attachEvent("onclick", function(event){
                alert("parent");

            });
            child.attachEvent("onclick", function(event){
                alert("child");
                event.cancelBubble=true;
            });

        });
    </script>
</head>
<body>

    <ul id="ul">
        <li id="li1">li1</li>
        <li id="li2">li2</li>
        <li id="li3">li3</li>
        <li id="li4">li4</li>
    </ul>

    <a id="a" href="http://www.baidu.com">點擊連接</a>

    <div id="parent">
        <div id="child">這是兒子</div>
    </div>

</body>
</html>

Event跨瀏覽器的兼容性寫法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            width:100%;
            height:100%;
        }
        #scroll{
            height:1000px;
            background:#abcdef;
        }
    </style>
    <script src="DomReady.js"></script>
    <script>
        myReady(function(){

            var EventUtil={
                addHandler:function(ele, type, handler){
                    if(ele.addEventListener){
                        ele.addEventListener(type, handler, false);
                    }else if(ele.attachEvent){
                        ele.attachEvent("on"+type, handler);
                    }else{
                        ele["on"+type]=handler;
                    }
                },
                removeHandler:function(ele, type, handler){
                    if(ele.removeEventListener){
                        ele.removeEventListener(type, handler, false);
                    }else if(ele.detachEvent){
                        ele.detachEvent("on"+type, handler);
                    }else{
                        ele["on"+type]=null;
                    }
                },
                mycurrentTarget:function(event){
                    return event.Target || event.srcElement;
                },
                mypreventDefault:function(event){
                    if(event.preventDefault()){
                        event.preventDefault();
                    }else{
                        event.returnValue=false;
                    }
                },
                mystopPropagation:function(event){
                    if(event.stopPropagation){
                        event.stopPropagation();
                    }else{
                        event.cancelBubble=true;
                    }
                }

            }


            var a=document.getElementById("a");
            EventUtil.addHandler(a, "click", function(event){
                alert("hello");
                EventUtil.mypreventDefault(event);//阻止默認行爲
            });

            var parent=document.getElementById("parent");
            EventUtil.addHandler(parent, "click", function(event){
                alert("parent");
            });

            var child=document.getElementById("child");
            EventUtil.addHandler(child, "click", function(event){
                var target=EventUtil.mycurrentTarget(event);
                alert(target.id);//<div id="child">這是兒子</div>
                EventUtil.mystopPropagation(event);//阻止冒泡到父元素
            })

        });
    </script>
</head>
<body>

    <ul id="ul">
        <li id="li1">li1</li>
        <li id="li2">li2</li>
        <li id="li3">li3</li>
        <li id="li4">li4</li>
    </ul>

    <a id="a" href="http://www.baidu.com">點擊連接</a>

    <div id="parent">
        <div id="child">這是兒子</div>
    </div>

</body>
</html>

UI事件 load

window的load事件

img的load事件

script的load事件

css的load事件

window的unload事件用戶從一個頁面切換到另外一個頁面

window的resize事件窗口大小調整

window的scroll事件窗口滾動

因爲resize和scroll是重複執行的，所以特別損耗性能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            width:100%;
            height:2000px;
        }
        
    </style>
    <script src="DomReady.js"></script>
    <script>
        myReady(function(){

            var EventUtil={
                addHandler:function(ele, type, handler){
                    if(ele.addEventListener){
                        ele.addEventListener(type, handler, false);
                    }else if(ele.attachEvent){
                        ele.attachEvent("on"+type, handler);
                    }else{
                        ele["on"+type]=handler;
                    }
                },
                removeHandler:function(ele, type, handler){
                    if(ele.removeEventListener){
                        ele.removeEventListener(type, handler, false);
                    }else if(ele.detachEvent){
                        ele.detachEvent("on"+type, handler);
                    }else{
                        ele["on"+type]=null;
                    }
                },
                mycurrentTarget:function(event){
                    return event.Target || event.srcElement;
                },
                mypreventDefault:function(event){
                    if(event.preventDefault()){
                        event.preventDefault();
                    }else{
                        event.returnValue=false;
                    }
                },
                mystopPropagation:function(event){
                    if(event.stopPropagation){
                        event.stopPropagation();
                    }else{
                        event.cancelBubble=true;
                    }
                }

            }

            // window的load事件
            EventUtil.addHandler(window, "load", function(){
                //alert("window的load事件！");
            });

            //img圖片加載完畢
            var img=document.createElement("img");
            EventUtil.addHandler(img, "load", function(){
                //alert("img圖片加載完畢！");
            });
            img.src="source/cat.jpg";

            //img圖片預加載（存入內存中）
            var img=new Image();
            EventUtil.addHandler(img, "load", function(){
                //alert("img圖片預加載完畢！");
            });
            img.src="source/cat.jpg";

            //動態加載js
            var script=document.createElement("script");
            EventUtil.addHandler(script, "load", function(){
                //alert("js加載完畢！");
            });
            script.src="jquery.js";
            //document.body.appendChild(script);

            //動態加載css
            var link=document.createElement("link");
            link.type="text/css";
            link.rel="stylesheet";
            EventUtil.addHandler(link, "load", function(){
                //alert("css加載完畢！");
            });
            link.href="style.css";
            //document.getElementsByTagName[0].appendChild(link);

            //window  unload
            EventUtil.addHandler(window, "unload", function(){
                //alert("unload！");
            });

            //window  resize
            EventUtil.addHandler(window, "resize", function(){
                //alert("resize");
            });

            //window  scroll
            EventUtil.addHandler(window, "scroll", function(){
                //alert("scroll");
            });
        });
    </script>
</head>
<body>

</body>
</html>

焦點事件

onfocus 獲得焦點

onblur 失去焦點

鼠標事件

onclick 鼠標單擊

ondblclick 鼠標雙擊

onmousedown 鼠標按下

onmousemove 鼠標在目標區域移動（重複執行影響性能）

onmouseup 鼠標鬆開

mousedown+mouseup=click

onmouseover 鼠標移入（進入元素或者元素的子元素）

onmouseout 鼠標移出（移出元素或者元素的子元素）

onmouseenter 鼠標移入（進入元素自己）

onmouseleave 鼠標移出（移出元素自己）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            width:100%;
        }
        #div{
            width:200px;
            height:200px;
            margin:50px auto;
            background:#abcdef;
            position: relative;
        }
        #child{
            width:80px;
            height:80px;
            background:pink;
            font-size:14px;
            position: absolute;
            left:50%;
            top:50%;
            margin-left:-40px;
            margin-top:-40px;
            line-height:80px;
            text-align: center;
        }
        
    </style>
    <script src="DomReady.js"></script>
    <script>
        myReady(function(){

            var EventUtil={
                addHandler:function(ele, type, handler){
                    if(ele.addEventListener){
                        ele.addEventListener(type, handler, false);
                    }else if(ele.attachEvent){
                        ele.attachEvent("on"+type, handler);
                    }else{
                        ele["on"+type]=handler;
                    }
                },
                removeHandler:function(ele, type, handler){
                    if(ele.removeEventListener){
                        ele.removeEventListener(type, handler, false);
                    }else if(ele.detachEvent){
                        ele.detachEvent("on"+type, handler);
                    }else{
                        ele["on"+type]=null;
                    }
                },
                mycurrentTarget:function(event){
                    return event.Target || event.srcElement;
                },
                mypreventDefault:function(event){
                    if(event.preventDefault()){
                        event.preventDefault();
                    }else{
                        event.returnValue=false;
                    }
                },
                mystopPropagation:function(event){
                    if(event.stopPropagation){
                        event.stopPropagation();
                    }else{
                        event.cancelBubble=true;
                    }
                }

            }

            //得到焦點
            var inout=document.getElementById("text");
            EventUtil.addHandler(inout, "focus", function(){
                //console.log("得到焦點");
            });

            //失去焦點
            var inout=document.getElementById("text");
            EventUtil.addHandler(inout, "blur", function(){
                //console.log("失去焦點");
            });

            //鼠標單擊
            var div=document.getElementById("div");
            EventUtil.addHandler(div, "click", function(){
                //console.log("鼠標單擊");
            });

            //鼠標雙擊
            var div=document.getElementById("div");
            EventUtil.addHandler(div, "dblclick", function(){
                //console.log("鼠標雙擊");
            });

            //鼠標按下
            var div=document.getElementById("div");
            EventUtil.addHandler(div, "mousedown", function(){
                //console.log("鼠標按下");
            });

            //鼠標鬆開
            var div=document.getElementById("div");
            EventUtil.addHandler(div, "mouseup", function(){
                //console.log("鼠標鬆開");
            });

            //鼠標移動
            var div=document.getElementById("div");
            EventUtil.addHandler(div, "mousemove", function(){
                //console.log("鼠標移動");
            });

            //鼠標進入
            var div=document.getElementById("div");
            EventUtil.addHandler(div, "mouseover", function(){
                console.log("mouseover鼠標進入");
            });

            //鼠標離開
            var div=document.getElementById("div");
            EventUtil.addHandler(div, "mouseout", function(){
                console.log("mouseout鼠標離開");
            });

            //鼠標進入
            var div=document.getElementById("div");
            EventUtil.addHandler(div, "mouseenter", function(){
                console.log("mouseenter鼠標進入");
            });

            //鼠標離開
            var div=document.getElementById("div");
            EventUtil.addHandler(div, "mouseleave", function(){
                console.log("mouseleave鼠標離開");
            });
        });
    </script>
</head>
<body>

    <input type="text" id="text" value="text">
    <div id="div">
        <div id="child">這是子元素</div>
    </div>
</body>
</html>

event.shiftKey shift+點擊

event.ctrlKey ctrl+點擊

event.altKey alt+點擊

event.metaKey meta+點擊

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            width:100%;
        }
        #box{
            width:200px;
            height:200px;
            margin:50px auto;
            background:#abcdef;
            position: relative;
        }

        
    </style>
    <script src="DomReady.js"></script>
    <script>
        myReady(function(){

            var EventUtil={
                addHandler:function(ele, type, handler){
                    if(ele.addEventListener){
                        ele.addEventListener(type, handler, false);
                    }else if(ele.attachEvent){
                        ele.attachEvent("on"+type, handler);
                    }else{
                        ele["on"+type]=handler;
                    }
                },
                removeHandler:function(ele, type, handler){
                    if(ele.removeEventListener){
                        ele.removeEventListener(type, handler, false);
                    }else if(ele.detachEvent){
                        ele.detachEvent("on"+type, handler);
                    }else{
                        ele["on"+type]=null;
                    }
                },
                mycurrentTarget:function(event){
                    return event.Target || event.srcElement;
                },
                mypreventDefault:function(event){
                    if(event.preventDefault()){
                        event.preventDefault();
                    }else{
                        event.returnValue=false;
                    }
                },
                mystopPropagation:function(event){
                    if(event.stopPropagation){
                        event.stopPropagation();
                    }else{
                        event.cancelBubble=true;
                    }
                }

            }

            var box=document.getElementById("box");
            EventUtil.addHandler(box, "click", function(e){
                var keys=[];
                if(e.shiftKey){
                    keys.push("shift");
                }
                if(e.ctrlKey){
                    keys.push("ctrl");
                }
                if(e.altKey){
                    keys.push("alt");
                }
                if(e.metaKey){
                    keys.push("meta");
                }
                console.log(keys.join(","));//數組轉字符串
            });
        });
    </script>
</head>
<body>

    <div id="box"></div>
</body>
</html>

針對mousedown，存在event.button

高級瀏覽器：

event.button=0 鼠標左鍵

event.button=1 鼠標中鍵

event.button=2 鼠標右鍵

IE8及如下：

event.button=0 沒有按下鼠標

event.button=1 按下左鍵

event.button=2 按下右鍵

event.button=3 同時按下左右鍵

event.button=4 按下中間鍵

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            width:100%;
        }
        #box{
            width:200px;
            height:200px;
            margin:50px auto;
            background:#abcdef;
            position: relative;
        }

        
    </style>
    <script src="DomReady.js"></script>
    <script>
        myReady(function(){

            var EventUtil={
                addHandler:function(ele, type, handler){
                    if(ele.addEventListener){
                        ele.addEventListener(type, handler, false);
                    }else if(ele.attachEvent){
                        ele.attachEvent("on"+type, handler);
                    }else{
                        ele["on"+type]=handler;
                    }
                },
                removeHandler:function(ele, type, handler){
                    if(ele.removeEventListener){
                        ele.removeEventListener(type, handler, false);
                    }else if(ele.detachEvent){
                        ele.detachEvent("on"+type, handler);
                    }else{
                        ele["on"+type]=null;
                    }
                },
                mycurrentTarget:function(event){
                    return event.Target || event.srcElement;
                },
                mypreventDefault:function(event){
                    if(event.preventDefault()){
                        event.preventDefault();
                    }else{
                        event.returnValue=false;
                    }
                },
                mystopPropagation:function(event){
                    if(event.stopPropagation){
                        event.stopPropagation();
                    }else{
                        event.cancelBubble=true;
                    }
                }

            }

            var box=document.getElementById("box");
            EventUtil.addHandler(box, "mousedown", function(e){
                console.log(e.button);
            });
        });
    </script>
</head>
<body>

    <div id="box"></div>
</body>
</html>

鍵盤事件

keydown 按下任意鍵 keyup 鬆開鍵盤 event.keyCode 鍵碼（經過keydown獲取）

keypress 按下鍵盤上的字符鍵 charCode ascii碼（經過keypress獲取）

textInput 文本輸入 data 輸入的文本

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            width:100%;
        }
        #box{
            width:200px;
            height:200px;
            margin:50px auto;
            background:#abcdef;
            position: relative;
        }

        
    </style>
    <script src="DomReady.js"></script>
    <script>
        myReady(function(){

            var EventUtil={
                addHandler:function(ele, type, handler){
                    if(ele.addEventListener){
                        ele.addEventListener(type, handler, false);
                    }else if(ele.attachEvent){
                        ele.attachEvent("on"+type, handler);
                    }else{
                        ele["on"+type]=handler;
                    }
                },
                removeHandler:function(ele, type, handler){
                    if(ele.removeEventListener){
                        ele.removeEventListener(type, handler, false);
                    }else if(ele.detachEvent){
                        ele.detachEvent("on"+type, handler);
                    }else{
                        ele["on"+type]=null;
                    }
                },
                mycurrentTarget:function(event){
                    return event.Target || event.srcElement;
                },
                mypreventDefault:function(event){
                    if(event.preventDefault()){
                        event.preventDefault();
                    }else{
                        event.returnValue=false;
                    }
                },
                mystopPropagation:function(event){
                    if(event.stopPropagation){
                        event.stopPropagation();
                    }else{
                        event.cancelBubble=true;
                    }
                },
                getCharCode:function(event){
                    if(typeof event.charCode == "number"){
                        return event.charCode;
                    }else{
                        return event.keyCode;
                    }
                }

            }

            var input=document.getElementById("input");
            EventUtil.addHandler(input, "keydown", function(e){
                //console.log(e.keyCode+"keydown");
            });

            EventUtil.addHandler(input, "keyup", function(e){
                //console.log(e.keyCode+"keyup");
            });

            EventUtil.addHandler(input, "keypress", function(e){
                //console.log(e.charCode+"keypress");
            });

            EventUtil.addHandler(input, "textInput", function(e){
                console.log(e.data+"textInput");
            });
        });
    </script>
</head>
<body>

    <input type="text" id="input">
</body>
</html>

DOM 相關事件

DOMNodeRemoved DOM中某元素被刪除

DOMNodeRemovedFromDocument 從文檔中被刪除前觸發（事件句柄必須加在被操做的元素上，瀏覽器支持性很差，不推薦）

DOMNodeInserted DOM中某元素被添加

DOMNodeInsertedIntoDocument 從文檔中被添加以前觸發（事件句柄必須加在被操做的元素上，瀏覽器支持性很差，不推薦）

DOMSubtreeModified DOM結構發生改變

DOMContentLoaded DOM樹加載完便可

loaded DOM樹加載完，而且圖像+js+css等其餘資源也加載完

所以DOMContentLoaded速度快於loaded

hashchange #後面的值發生變化，只能給window對象綁定

event.oldURL 原來的url

event.newURL 新的url

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            width:100%;
        }
        #box{
            width:200px;
            height:200px;
            margin:50px auto;
            background:#abcdef;
            position: relative;
        }

        
    </style>
    <script src="DomReady.js"></script>
    <script>
        myReady(function(){

            var EventUtil={
                addHandler:function(ele, type, handler){
                    if(ele.addEventListener){
                        ele.addEventListener(type, handler, false);
                    }else if(ele.attachEvent){
                        ele.attachEvent("on"+type, handler);
                    }else{
                        ele["on"+type]=handler;
                    }
                },
                removeHandler:function(ele, type, handler){
                    if(ele.removeEventListener){
                        ele.removeEventListener(type, handler, false);
                    }else if(ele.detachEvent){
                        ele.detachEvent("on"+type, handler);
                    }else{
                        ele["on"+type]=null;
                    }
                },
                mycurrentTarget:function(event){
                    return event.Target || event.srcElement;
                },
                mypreventDefault:function(event){
                    if(event.preventDefault()){
                        event.preventDefault();
                    }else{
                        event.returnValue=false;
                    }
                },
                mystopPropagation:function(event){
                    if(event.stopPropagation){
                        event.stopPropagation();
                    }else{
                        event.cancelBubble=true;
                    }
                },
                getCharCode:function(event){
                    if(typeof event.charCode == "number"){
                        return event.charCode;
                    }else{
                        return event.keyCode;
                    }
                }

            }

            var ul=document.getElementById("ul");

            //DOM中某元素被刪除
            EventUtil.addHandler(document, "DOMNodeRemoved", function(e){
                //console.log("removed");//removed
            });
            //ul.removeChild(ul.children[3]);
            
            //DOM中某元素被添加
            var li=document.createElement("li");
            EventUtil.addHandler(document, "DOMNodeInserted", function(e){
                //console.log("inserted");//inserted
            });
            //ul.appendChild(li); 


            //DOM結構從文檔中被刪除以前觸發
            //addHandler中填寫的是被刪除的元素
            var li=ul.children[3];
            EventUtil.addHandler(li, "DOMNodeRemovedFromDocument", function(e){
                //console.log("DOM結構從文檔中被刪除以前觸發");//DOM結構從文檔中被刪除以前觸發
            });
            //ul.removeChild(li);
            
            //DOM結構從文檔中被添加以前觸發
            //addHandler中填寫的是被添加的元素
            var li=document.createElement("li");
            EventUtil.addHandler(li, "DOMNodeInsertedIntoDocument", function(e){
                //console.log("DOM結構從文檔中被添加以前觸發");//DOM結構從文檔中被添加以前觸發
            });
            //ul.appendChild(li);
            
            //DOM結構發生改變
            EventUtil.addHandler(document, "DOMSubtreeModified", function(e){
                //console.log("DOM結構發生改變");//DOM結構發生改變
            });
            //ul.removeChild(ul.children[3]);//4被刪除  
            
            //DOM結構發生改變
            EventUtil.addHandler(document, "DOMSubtreeModified", function(e){
                //console.log("DOM結構發生改變");//DOM結構發生改變
            });
            //ul.removeChild(ul.children[3]);//4被刪除
            
            //DOM樹加載完
            EventUtil.addHandler(document, "DOMContentLoaded", function(e){
                //console.log("DOM樹加載完");//DOM結構發生改變
            });

            //hash值改變
            EventUtil.addHandler(window, "hashchange", function(e){
                console.log(e.oldURL + "\n" + e.newURL);//DOM結構發生改變
                //file:///C:/Users/96579/Desktop/index.html#11
                //file:///C:/Users/96579/Desktop/index.html#
            });

        });

    </script>
</head>
<body>

    <ul id="ul">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
</body>
</html>

移動端經常使用事件類型

touchstart 手指接觸屏幕

touchmove 手指在屏幕上移動

touchend 手指離開屏幕

touchcancel 系統中止觸摸跟蹤時觸發

首先在head上添加移動端適配的設置：

touch的event對象

event.touches 屏幕上的觸摸點個數

event.changedTouches 屏幕上移動的觸摸點的個數

event.targetTouches 目標區域內的觸摸點的個數

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            width:100%;
        }
        #div{
            width:100px;
            height:100px;
            background:#abcdef;
        }
        
    </style>
    <script src="DomReady.js"></script>
    <script>
        myReady(function(){

            var EventUtil={
                addHandler:function(ele, type, handler){
                    if(ele.addEventListener){
                        ele.addEventListener(type, handler, false);
                    }else if(ele.attachEvent){
                        ele.attachEvent("on"+type, handler);
                    }else{
                        ele["on"+type]=handler;
                    }
                },
                removeHandler:function(ele, type, handler){
                    if(ele.removeEventListener){
                        ele.removeEventListener(type, handler, false);
                    }else if(ele.detachEvent){
                        ele.detachEvent("on"+type, handler);
                    }else{
                        ele["on"+type]=null;
                    }
                },
                mycurrentTarget:function(event){
                    return event.Target || event.srcElement;
                },
                mypreventDefault:function(event){
                    if(event.preventDefault()){
                        event.preventDefault();
                    }else{
                        event.returnValue=false;
                    }
                },
                mystopPropagation:function(event){
                    if(event.stopPropagation){
                        event.stopPropagation();
                    }else{
                        event.cancelBubble=true;
                    }
                },
                getCharCode:function(event){
                    if(typeof event.charCode == "number"){
                        return event.charCode;
                    }else{
                        return event.keyCode;
                    }
                }

            }

            var div=document.getElementById("div");

            EventUtil.addHandler(div, "touchstart", function(e){
                console.log("touchstart");
                console.log(e.touches);
                console.log(e.changedTouches);
                console.log(e.targetTouches);
            });
            EventUtil.addHandler(div, "touchmove", function(e){
                console.log("touchmove");
            });
            EventUtil.addHandler(div, "touchend", function(e){
                console.log("touchend");
            });
            
        });

    </script>
</head>
<body>
    <div id="div"></div>
</body>
</html>

一個小案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            width:100%;
        }
        #div{
            width:400px;
            height:400px;
            border:1px solid;
            margin:50px;
        }
        #ul{
            list-style: none;
        }
        #ul li{
            width:100px;
            height:30px;
            line-height:30px;
            text-align: center;
            border-radius:5px;
            display: inline-block;
            cursor:pointer;
        }
        #ul li:hover{
            color:#fff;
        }
        #ul li:first-child{
            background:pink;
        }
        #ul li:nth-child(2){
            background:#abcdef;
        }
        #ul li:nth-child(3){
            background:lightgreen;
        }
        #ul li:last-child{
            background:orange;
        }
        
    </style>
    <script src="DomReady.js"></script>
    <script>
        myReady(function(){

            var EventUtil={
                addHandler:function(ele, type, handler){
                    if(ele.addEventListener){
                        ele.addEventListener(type, handler, false);
                    }else if(ele.attachEvent){
                        ele.attachEvent("on"+type, handler);
                    }else{
                        ele["on"+type]=handler;
                    }
                },
                removeHandler:function(ele, type, handler){
                    if(ele.removeEventListener){
                        ele.removeEventListener(type, handler, false);
                    }else if(ele.detachEvent){
                        ele.detachEvent("on"+type, handler);
                    }else{
                        ele["on"+type]=null;
                    }
                },
                mycurrentTarget:function(event){
                    return event.Target || event.srcElement;
                },
                mypreventDefault:function(event){
                    if(event.preventDefault()){
                        event.preventDefault();
                    }else{
                        event.returnValue=false;
                    }
                },
                mystopPropagation:function(event){
                    if(event.stopPropagation){
                        event.stopPropagation();
                    }else{
                        event.cancelBubble=true;
                    }
                },
                getCharCode:function(event){
                    if(typeof event.charCode == "number"){
                        return event.charCode;
                    }else{
                        return event.keyCode;
                    }
                }

            }

            var ul=document.getElementById("ul");
            var div=document.getElementById("div");

            EventUtil.addHandler(ul, "click", function(event){
                var e=event.target;//緩存
                if(e.innerHTML=="仙女粉"){
                    div.style.background="pink";
                }else if(e.innerHTML=="氣質藍"){
                    div.style.background="#abcdef";
                }else if(e.innerHTML=="薄荷綠"){
                    div.style.background="lightgreen";
                }else if(e.innerHTML=="元氣橙"){
                    div.style.background="orange";
                }
            });
            
        });

    </script>
</head>
<body>
    <div id="div"></div>
    <ul id="ul">
        <li>仙女粉</li>
        <li>氣質藍</li>
        <li>薄荷綠</li>
        <li>元氣橙</li>
    </ul>
</body>
</html>