javascript设计模式(张容铭)学习笔记 - 外观模式…
2018-09-18 06:38:48来源:博客园 阅读 ()
有一个需求要为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(); } }
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:js中对URL进行转码与解码
- javascript面向对象入门基础详细介绍 2020-03-29
- JavaScript函数表达式详解及实例 2020-03-25
- 如何用javascript连接access数据库 2020-03-20
- js中去掉字串左右空格 2020-03-20
- Javascript中的经典技巧 2020-03-20
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash