高效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>