摘要：前面用了8篇回顾浏览器中内置事件，且写出了一个基本完整，功能还算强大的事件模块。如果您愿意，还可以继续添加一些功能如事件代理、一次性添加多个事件、和选择器结合一次性为多个元素添加事件。当然这些都不是必须的，可根据需求自行扩展。这篇开始看看自定义事件，自定义事件有许多应用场景。实际上它实现了“观察者模式”。使用过google（或灵图）地图API的同学应该知道地图有个缩放事件zoom，即地图放大或缩小的时候触发。这个zoom就是自定义事件。感兴趣的可以点击此处看看。自定义事件并不深奥，几行代码就可以实现一个var obj = {};obj['click'] = function()
阅读全文
摘要：这篇为其增加几个功能1，延迟handler的执行2，handler可指定执行上下文，即有时可能需要handler内this不是HTMLElement3，停止事件冒泡和阻止默认行为4，阻止元素默认行为5，停止事件冒泡为此，将添加事件函数on的接口做了修改。第四个参数是个对象，分别可指定以下参数E.on(el, 'click', fn, { once : // true则该handler仅执行一次 delay : // handler延迟执行的时间，以毫秒为单位 scope : // handler执行上下文，默认为el stopEvent : // 阻止el默认行为，停止冒泡 p
阅读全文
摘要：现有的事件管理都挂放在HTMLElement上的，即每个element有个events属性，该属性可以当成个hash对象。里面存储这该element的所有事件及事件handler。比如给element添加了click/mouseover/mouseout 三个事件，响应函数分别是f1/f2/f3。events的结构如下每一个events['click'] 是一个数组，即存放多个handler。给element的click事件添加3个事件handler，其结构如下往HTMLElement上添加了一个对象，该对象中存放了许多事件handler，可能会存在内存泄露的问题尤其在IE6中
阅读全文
摘要：基于“勿重复判断浏览器”的原则，将添加/删除/触发事件的三个分支重写。如下var w3c = !!window.addEventListener, addListener = w3c ? function(el, type, fn) { el.addEventListener(type, fn, false); } : function(el, type, fn) { el.attachEvent('on' + type, fn); }, removeListener = w3c ? function(el, type, fn) { el.removeEventListener
阅读全文
摘要：如下var ary = /h/('hello');alert(ary);IE6/7/8/9中报错Firefox/Safari/Chrome/Opera的最新版本均弹出了“h”以上写法等价于var ary = /h/.exec('hello');即Firefox/Safari/Chrome/Opera浏览器中使用exec方法时可以去掉“exec”用 “正则直接量+()” 方式使用。IE10 Platform Preview 仍然不支持该简写方式。相关：https://developer.mozilla.org/en/JavaScript/Reference/Glo
阅读全文
摘要：拿添加事件示例// 方式1function addEvent(el, type, fn){ if(el.addEventListener){ el.addEventListener(type, fn, false); }else{ el.attachEvent('on'+type, fn) }}// 方式2var addEvent = document.addEventListener ? function(el, type, fn) {el.addEventListener(type, fn, false);} : function(el, type, fn) {el.att
阅读全文
摘要：setTimeout/setInterval，这两个函数相信前端开发同学都很熟悉。它们在非IE(6-9)浏览器中还可以如下使用setTimeout(function(obj){ alert(obj.a);}, 2000, {a:1});即传了第三个参数，第三个参数将作为回调函数的参数obj传入。在非IE浏览器中都弹出了1。这样有个好处，即解决了回调函数的执行上下文，比如要调用某个对象的某个方法，即可以通过参数把该对象传进去。setTimeout(function(obj){ obj.method();}, 2000, obj);当然，你还可以传多个参数给回调函数，如下setTimeout(fu
阅读全文
摘要：script请求返回JSON实际上是脚本注入。它虽然解决了跨域问题，但它不是万能的。不能接受HTTP状态码不能使用POST提交（默认GET）不能发送和接受HTTP头不能设置同步调用（默认异步）...其最严重的就是不能提供错误处理，如果请求的代码正常执行那么会得到正确的结果。如果请求失败，如404,5...
阅读全文
摘要：续上篇，加两个实用功能1，增加data属性，请求参数2，增加scope属性，可以让回调函数在指定的上下文中执行接口如下Sjax.load(url, { data // 请求参数 (键值对字符串或js对象) success // 成功后回调函数 scope // 回调函数执行上下文 timest...
阅读全文
摘要：跨域请求的方式有很多种，iframedocument.domainwindow.namescriptXDomainRequest (IE8+)XMLHTTPRequest (Firefox3.5+)postMessage (HTML5)后台代理...它们有各自的优缺点，返回的数据格式也各不同，应根据...
阅读全文
摘要：不久前我写了一个Ajax工具库。这篇是对请求超时处理的补充。IE8/9的XMLHttpRequest对象已经增加这方面的支持了。IE10 pre1测试也支持。如果W3C能将这两个东东标准化多好啊，不用那么的hack方式实现了。XMLHttpRequest的timeout属性可以设置，表示在等待响应多少毫秒之后终止。 即如果在规定的时间内浏览器没有收到响应，那么就触发timeout事件，给xhr.ontimeout赋值为一个响应函数后可被执行。主要代码如下xhr.onreadystatechange = function(){ if(xhr.readyState == 4){ try{ var
阅读全文
摘要：上一篇实现了对多个JS文件的顺序加载，这篇再完善丰富一下。加入回调函数，即每个JS文件加载后都有一次回调机会，这个回调是取决于使用者的。也就是说使用者可以配置是否回调，甚至指定某一个或多个回调。非常灵活，可以根据项目需求决定那些资源JS下载后进行回调。此外这篇还解决了重复资源加载问题。接口如下 QueueLazyLoad.js([ { url // JS路径 fn // 回调函数 scope // 回调函数执行上下文，默认为window }, ... ]);示例 QueueLazyLoad_0.2.js loading a.js ag...
阅读全文
摘要：前面三篇实现了多个JS并行加载，即各个JS文件相互不依赖。实现时仅顺序将其插入到head中。直至全部插入完毕才进行回调。并行下载的好处是效率较高。但有时我们需要加载的JS模块之间存在相互依赖关系。如a,b,c三个JS文件。b.js中代码依赖于a中定义的某些函数或类，c.js又依赖b.js中的函数或类，而c中具有一个入口函数。这时得保证a,b,c顺序加载，否则如果c早于b或a先加载完，则可能会出现xx未定义之类的错误提示。顺序加载的缺点就是效率较低，因为必须一个个的下载。Queue LazyLoad 0.1版接口非常之简单，如下传个数组url即可 QueueLazyLoad.js([ { ...
阅读全文
摘要：在开始这篇前，有两个小问题须说明一下情况一LazyLoad.js(['a.js','a.js'],function(){});有人会问为什么要在页面中引入两次a.js？ 我也想问。其实是多余的。但有人就喜欢这么用，那怎么办。只能凉拌了。我可以在内部对数组中重复元素去重下。但这无疑增加了LazyLoad.js的代码量，或者说我更愿意看到不要这么去写。当然我自己用肯定不会这么写的。情况二LazyLoad.js(['a.js'], function(){});LazyLoad.js(['b.js'], function(){});这种写
阅读全文
