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