高效js代碼-事件委託

時間 2019-11-11

原文原文鏈接

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>js事件委託</title>
</head>

<style>
    #con{
        width:200px;
        height:200px;
        background: orange;
    }
    #outer{
        position: relative;
        top: 50px;
        left: 50px;
        width:100px;
        height:100px;
        background: #eeddff;
    }
    #inner{
        position: relative;
        top: 251px;
        left: 25px;
        width:50px;
        height:50px;
        background: #44ddff;
    }
</style>
<body>


<ul id="ul">
    <li class="item" id="add">add</li>
    <li class="item" id="del">del</li>
    <li class="item" id="move">move</li>
</ul>



</body>
</html>

<script>
// DOM事件流
// DOM2級事件規定事件流包括三個階段：事件捕獲階段、處於目標階段和事件冒泡階段。
// DOM2級事件定義了兩個方法addEventListener()和removeEventListener()
// IE不一樣的它有本身的方法attachEvent()和detachEvent

    // 事件冒泡
    // ie事件流叫事件冒泡
    // 第三個參數設置爲false -事件冒泡階段觸發事件

    // 事件捕獲
    // ie事件流叫事件冒泡
    // 第三個參數設置爲false -事件冒泡階段觸發事件
    // Netscape（網景）瀏覽器是一個網絡信息瀏覽器，也是開發其公司，門戶網站的名稱。
    // 事件捕獲
    // 第三個參數設置爲true -事件捕獲階段觸發事件

var  eventUtils = {
    // addEventHandler:function(){}
    addEventHandler: function(el,event,fnHandler){
        // console.log('test');
        if(el.addEventListener){
            console.log(el.addEventListener);
            el.addEventListener(event,fnHandler,false)
        }
            else{
                console.log(el.attachEvent);
                el.attachEvent('on'+event,fnHandler)}
    },
    removeEventHandler: function(el,event,fnHandler){
        // console.log('test');
        if(el.removeEventListener){
            // console.log(el.removeEventListener);
            el.removeEventListener(event,fnHandler,false)
        }
            else{
                // console.log(el.detachEvent);
                el.detachEvent('on'+event,fnHandler)}
    }
}

</script>

<script>
    // 事件委託
    // 事件委託是經過事件冒泡原理實現的一個高效率js編碼
    // 原理：減小js操做dom 實現瀏覽器性能提高
    window.onload = function(){
        // alert();
        var ul = document.getElementById('ul');
        // var lis
        //         = document.getElementById('li'); 

        // 點擊事件委託
        eventUtils.addEventHandler(ul,'click',function(e){
            console.log(e);
            var ev =(e)?e:window.event;
            var target = ev.target || ev.srcElement;
            console.log(target.id);
        });

        // 移入變紅，移出變白
        var moveHover = {
            mouseover:function(){
                eventUtils.addEventHandler(ul,'mouseover',function(e){
                // console.log(e);
                var ev =(e)?e:window.event;
                var target = ev.target || ev.srcElement;
                // console.log(target.id);
                if(target.nodeName.toLowerCase() == 'li'){
                    target.style.background ='red';
                }

                });
            },
            mouseout:function(){
                eventUtils.addEventHandler(ul,'mouseout',function(e){
                // console.log(e);
                var ev =(e)?e:window.event;
                var target = ev.target || ev.srcElement;
                // console.log(target.id);
                if(target.nodeName.toLowerCase() == 'li'){
                    target.style.background ='#fff';
                }

                });
            }
        };
        moveHover.mouseover();
        moveHover.mouseout();
        


    };

    



</script>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。