编写可维护的JS 06

7.事件处理

//典型用法



    function handlerClick(event){



        var popup  = document.getElementById('popup');



        popup.style.left = event.clientX+'px';

        popup.style.top = event.clientY+'px';

    }

1.隔离应用逻辑

隔离应用逻辑



/*

    上述代码只用到了 clientX/clientY 两个属性。 但是却将event事件整个传入 。

*/

// 1 隔离应用逻辑



/*

    上述例子中 操作popup的left/right值   算是一种应用逻辑，而这个应用逻辑可能其他地方也会操作



    既然其他地方也会操作这个应用逻辑。我们就将它独立出来 。



*/



//拆分应用逻辑

var myPopup = {



        handler:function(event){



            this.showpopup(event);

        },



        showpopup:function(event){

             var popup  = document.getElementById('popup');

            popup.style.left = event.clientX+'px';

            popup.style.top = event.clientY+'px';

        }

};



//调用

var obtn1=document.getElementById('btn1');



obtn1.addEventListener('click',function(event){



    myPopup.handler(event);



},false);

应用逻辑有可能被多处使用，如果正常写可能会被复制很多份，将应用逻辑和事件处理拆分开

2. 不要分发事件对象

/*

    在1里面  只需要用到clientX 和clientY 但是却将event时间对象穿进去。



    好的api  依赖是透明的。 showpopup方法只需要2个数据 而不是一个event



    传递一个event进去反而将事情变得复杂。



*/

//重写以上例子

var myPopup2 = {

        handler:function(event){

            event.preventDefault();

            event.stopPropagation();



            this.showpopup(event.clientX,event.clientY);

        },



        showpopup:function(x,y){



            var popup  = document.getElementById('popup');

            popup.style.left = x+'px';

            popup.style.top = y+'px';

           }

};

//调用

var obtn2=document.getElementById('btn1');



obtn1.addEventListener('click',function(event){



    myPopup2.handler(event.clientX,event.clientY);



},false);