编写可维护的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);