javascript设计模式(张容铭)学习笔记

有一个需求要为document对象绑定click事件来是想隐藏提示框的交互功能，于是小白写了如下代码：

document.onclick = function(e) {

  e.preventDefault();

  if(e.target !== document.getElementById('myinput')) {

    hidePageAlert();

  }

}

function hidePageAlert() {

  //隐藏提示框

}

同事小铭看了看代码说：

“首先，你为document 绑定了click事件，但是onclick是DOM0级事件，也就是说这种方式绑定的时间相当于为元素绑定了一个时间方法，所以如果团队中的其他人再次通过这种方式为document绑定click事件时，就相当于重复定义了一个方法，会将你定义的click事件方法覆盖，如下列程序。”

document.onclick= function() {

  //其他开发人员重新为document绑定时间会覆盖前面定义的DOM0级click事件

}

“所以你这种方式是很危险的。因此你应该用DOM2级事件处理程序提供的方法addEventListener来实现，然而你知道老版本的IE浏览器（低于9）是不支持这个方法的，它支持的是attachEvent，当然如果有不支持DOM2级事件处理程序的浏览器，你只能用onclick事件方法来绑定事件。”

“那么有没有一个兼容所有浏览器的方式呢？” 小白追问。

兼容模式

// 外观模式实现

function addEvent(dom, type, fn) {

  // 对于支持DOM2级事件处理程序addEventListener方法的浏览器

  if(dom.addEventListener) {

    dome.addEventListener(type, fn, false);

  // 对于不支持addEventListener 方法，但是支持attachEvent方法的浏览器

  }else if(dom.attachEvent) {

    dom.attachEvent('on' + type, fn);

  // 对于不支持addEventListener方法也不支持attachEvent方法，但支持on+'事件名'的浏览器

  }else{

     dom['on' + type] = fn;

  }

}

“这样我们以后对于支持addEventListener 或 attachEvent方法的浏览器就可以放心的绑定多个事件了，如下所示。”

var myInput = document.getElementById('myinput');

addEvent(myInput, 'click', function(){

  console.log('绑定第一个事件')

})

addEvent(myInput, 'click', function(){

  console.log('绑定第二个事件')

})

除此之外

“不过之前写的代码问题不止一个，之前说了，外观模式可以简化底层接口复杂性，也可以解决浏览器兼容性问题。而你之前写的代码除了绑定时间的问题外，另外两处问题是在其他IE低版本浏览器中不兼容 e.preventDefault 和 e.target。你也可以通过外观模式来解决。”

// 获取事件对象

var getEvent = function(event) {

  // 标准浏览器返回event，IE下window.event

  return event || window.event;

}

// 获取元素

var getTarget = function(event) {

  var event = getEvent(event);

  // 标准浏览器下event.target, IE下event.srcElement

  return event.target || event.srcElement；

}

// 阻止默认行为

var preventDefault = function(event) {

  var event = getEvent(event);

  // 标准浏览器

  if(event.preventDefault) {

    event.preventDefault();

  // IE 浏览器

  }else {

    event.returnValue = false;

  }

}

“有了上面的方法，我们就可以用兼容的简单方式来解决上面的问题。”

document.onclick = function(e) {

  // 阻止默认行为

  preventDefault(e);

  // 获取事件源目标对象

  if(getTarget(e) != document.getElementById('myinput')){

    hideInputSug();

  }

}

巴特西

javascript设计模式(张容铭)学习笔记 - 外观模式绑定事件

最新文章

热门文章