【JS 设计模式 】门面模式之DOM元素绑定事件

标签：

var button = document.getElementById("button");
button.attachEvent("click", function(){
  alert(id.tagName);
});

var id = document.getElementById("div");
button.addEventListener("click", function(){
  alert(id.tagName);
}, false);

<button id="button">点击</button>

绑定代码

var button = document.getElementById("button");
if ( document.attachEvent ) {
  button.attachEvent("click", function(){
    alert(button.tagName);
  });
} else if (document.addEventListener) {
  button.addEventListener("click", function(){
    alert(button.tagName);
  }, false);
} else {
  button["onclick"] = function(){
    alert(button.tagName);
  }
}

<button id="button1">点击</button>
<button id="button2">点击</button>

var button1 = document.getElementById("button1");
if ( document.attachEvent ) {
  button1.attachEvent("click", function(){
    alert(button1.tagName);
  });
} else if (document.addEventListener) {
  button1.addEventListener("click", function(){
    alert(button1.tagName);
  }, false);
} else {
  button1["onclick"] = function(){
    alert(button1.tagName);
  }
}


var button2 = document.getElementById("button2");
if ( document.attachEvent ) {
  button2.attachEvent("click", function(){
    alert(button2.tagName);
  });
} else if (document.addEventListener) {
  button2.addEventListener("click", function(){
    alert(button2.tagName);
  }, false);
} else {
  button2["onclick"] = function(){
    alert(button2.tagName);
  }
}

答案是：不。

//绑定事件的复杂逻辑
function bindDOM(id, callback) {
  id = document.getElementById(id);


  if ( document.attachEvent ) {
    id.attachEvent("click", callback);
  } else if (document.addEventListener) {
    id.addEventListener("click", callback, false);
  } else {
    id["onclick"] = callback
  }
}


// 客户调用
bindDOM("button1", function(){alert("Facade");});
bindDOM("button2", function(){alert("Facade");});

二是消除类与使用它的客户代码之间的耦合代码， 客户代码的调用和事件绑定的代码分离开来，可以把这个接口提供给别人来调用，调用都不需要关心其内部实现，只需要根据接口提供一个id名和回调函数(callback)即可；

类似于门面模式的还有：阻止冒泡、HTML元素设置样式、HTML元素阻止默认事件、event事件、获取event事件源等等 ；

自己写的代码如有二行以代码，在不止一处使用，那么我们可以把代码提成一个接口，简化客户代码的代码量也有了层次结构和解耦，可读性强；

【JS 设计模式 】门面模式之DOM元素绑定事件

标签：

原文地址：http://blog.csdn.net/itpinpai/article/details/51363049