js维护性技巧——事件处理

事件触发时，事件对象（event）会作为回调参数传入事件处理程序中，event对象包含所有和事件相关的信息，但在很多场景中，只是用到了它所提供信息的一小部分，例如：

 function handleClick(event){
            var body=document.querySelector("body")
            var div=document.createElement("div");
            body.appendChild(div)
            div.className="test";
            div.style.left=event.clientX+"px";
            div.style.top=event.clientY+"px";    
        }
        addEventListener("click",handleClick)

这里只用到event对象的两个属性，clientX和clientY，在将元素渲染出来前先用这两个属性给它定位

这种写法有个问题，事件处理程序包含了应用逻辑，应该将应用逻辑从所有事件处理程序中抽离出来，因为不知道什么时候会在其他地方触发同一段逻辑，会导致多个事件处理程序执行同样的逻辑，而代码却被复制了多份

 var MyApplication = {
            handleClick: function (event) {
                this.showDiv(event);
            },
            showDiv: function (event) {
                var body = document.querySelector("body")
                var div = document.createElement("div");
                body.appendChild(div)
                div.className = "test";
                div.style.left = event.clientX + "px";
                div.style.top = event.clientY + "px";
            }
        }
        addEventListener("click", function(event){
            MyApplication.handleClick(event)
        })

现在所有应用逻辑都转移到了MyApplication.showDiv()方法中，若应用逻辑被剥离出去，对同一段功能代码的调用可以在多点发生，不需要依赖特定的某个事件触发，这样更方便

还有一个问题，event对象被使用了多次，但实际上只需要它的两个数据，可以改写为：

 var MyApplication = {
            handleClick: function (event) {
                this.showDiv(event.clientX,event.clientY);
            },
            showDiv: function (x,y) {
                var body = document.querySelector("body")
                var div = document.createElement("div");
                body.appendChild(div)
                div.className = "test";
                div.style.left = x + "px";
                div.style.top = y + "px";
            }
        }
        addEventListener("click", function(event){
            MyApplication.handleClick(event)
        })

此时应用逻辑不需要对event产生依赖，这样一来在任意位置都可以很轻易的调用这段逻辑了

MyApplication.showDiv(50,60)

还可以加上组织默认事件和事件冒泡

 handleClick: function (event) {
                event.preventDefault();
                event.stopPropagation();
                this.showDiv(event.clientX,event.clientY);
            },