var linkG = document.getElementById('g');
linkG.addEventListener('click', function(e){
test();
e.preventDefault();
}, false);
测试地址： http://thecdn.sinaapp.com/page/demo/link-test3/
这次，所有的地址都不会修改，且都不会跳转了，获取数据也正常了。
和之前的区别在哪里呢？
event.preventDefault();
如果我们要使用a标签做按钮使用，那么一定要记得阻止默认事件。
或许你会说，你这个写的麻烦，我一个return false就解决问题了，
如果真的是这样的话，那么请自行尝试，至少我测试chrome中第三个demo中，绑定事件使用return false不可以阻止默认事件。
当然，如果你写在元素的内联事件如onclick中的return false还是可以阻止默认的。
哦，那么这些测试是毫无价值的么，显然不是，上面这段测试，显示了如果使用良性的html/css/js三层分离的注册事件来驱动页面，
那么使用a作为事件驱动的元素，务必加上event.preventDefault();
到这里该谈的基本都谈完了，那么我们来谈谈具体的事情吧。
上面的A~G几种形式的写法，各有利弊，在不同的环境或许都是最有解。
我们先谈谈好处：
第一种：直接调用页面中的全局函数，简单粗暴，无论什么时候都不会修改url，发生上面例子中的url改变的事情发生。
第二种：调用一个noop函数，即空函数，类似写法还有void(’0′);可参考o‘reilly ajax hacks那本书，由于没有写死调用的函数，我们可以通过绑定事件把动作附加到元素上，也不会发生上面改变url的事情发生。
第三种：兼容第二种的好处之上，防止写码的时候忽略了preventDefault的处理。
第四种：传统的简单粗暴写法/
第五种：使用锚点+绑定事件的方法来进行动作附加，即使js脚本没有下载完毕，也不会发生报错，而且符合三层分离的原则。而且锚点也可以表现语义化动作。
第六种：某大牛发现了 “空路径对页面性能影响的解决方案”，有兴趣可以搜索并测试，如果你测试了，不妨告诉我，谢谢。（不确定会对a的href也产生影响）
第七种：完全的无额外内容。
然后世界开始分裂，我要开始吐槽了：
第一种：直接调用伪协议的方式调用函数，现代浏览器中一致性很好，但是不确定在古老的浏览器中可以保持一致性。而且直接调用只能调用全局函数，不利于函数结构组织。
第二种：集成第一种的劣势。
第三种：集成第一种的劣势，且没有考虑三层分离。
第四种：且没有考虑三层分离。
第五种：如果脚本没用下载完毕，会修改url hash，如果协同写码，别人使用到url操作，且没有做去除hash处理，几率发生问题，如之前的测试。
第六种：不论会不会产生页面性能积极影响，about:blank作为额外的无语义内容就是让人不爽的。
第七种：这货不是一个标准的a标签，还记得之前说要看RFC和W3C标准嘛？
可能有的童鞋懒的找，我把内容贴一下：
Non-empty URL potentially surrounded by spaces
A URL that is not the empty string, optionally with leading and/or trailing space characters.
Absolute URL potentially surrounded by spaces
A valid IRI as defined in [RFC 3987], optionally with leading and/or trailing space characters.
接着我们在来看一个小东西，事件绑定次数，即句柄数量：
第一种：0，环保
第二种: 1
第三种: 2 周全的代价
第四种: 1
第五种: 1
第六种: 1
第七种: 1
我发现我有话痨属性，多提一个事情吧：
淘宝首页使用javascript: 10处
淘宝首页使用#: 10处
Github内页首页使用javascript: 0处
Github内页首页使用#: 9处
360首页使用javascript: 0处
360首页使用#: 7处
腾讯首页使用javascript: 37处
腾讯首页使用#: 11处
新浪首页使用javascript: 26处
新浪首页使用#: 0处
其他的大家自己搜索的玩呗~~
现在都流行开放式结局，那么，文章就此EOF。
至于选择哪个方案，我觉得大家都心里有数了，欢迎讨论~
原文链接： http://soulteary.com/2013/01/11/let-talk-about-tag-a.html
linkG.addEventListener('click', function(e){
test();
e.preventDefault();
}, false);
测试地址： http://thecdn.sinaapp.com/page/demo/link-test3/
这次，所有的地址都不会修改，且都不会跳转了，获取数据也正常了。
和之前的区别在哪里呢？
event.preventDefault();
如果我们要使用a标签做按钮使用，那么一定要记得阻止默认事件。
或许你会说，你这个写的麻烦，我一个return false就解决问题了，
如果真的是这样的话，那么请自行尝试，至少我测试chrome中第三个demo中，绑定事件使用return false不可以阻止默认事件。
当然，如果你写在元素的内联事件如onclick中的return false还是可以阻止默认的。
哦，那么这些测试是毫无价值的么，显然不是，上面这段测试，显示了如果使用良性的html/css/js三层分离的注册事件来驱动页面，
那么使用a作为事件驱动的元素，务必加上event.preventDefault();
到这里该谈的基本都谈完了，那么我们来谈谈具体的事情吧。
上面的A~G几种形式的写法，各有利弊，在不同的环境或许都是最有解。
我们先谈谈好处：
第一种：直接调用页面中的全局函数，简单粗暴，无论什么时候都不会修改url，发生上面例子中的url改变的事情发生。
第二种：调用一个noop函数，即空函数，类似写法还有void(’0′);可参考o‘reilly ajax hacks那本书，由于没有写死调用的函数，我们可以通过绑定事件把动作附加到元素上，也不会发生上面改变url的事情发生。
第三种：兼容第二种的好处之上，防止写码的时候忽略了preventDefault的处理。
第四种：传统的简单粗暴写法/
第五种：使用锚点+绑定事件的方法来进行动作附加，即使js脚本没有下载完毕，也不会发生报错，而且符合三层分离的原则。而且锚点也可以表现语义化动作。
第六种：某大牛发现了 “空路径对页面性能影响的解决方案”，有兴趣可以搜索并测试，如果你测试了，不妨告诉我，谢谢。（不确定会对a的href也产生影响）
第七种：完全的无额外内容。
然后世界开始分裂，我要开始吐槽了：
第一种：直接调用伪协议的方式调用函数，现代浏览器中一致性很好，但是不确定在古老的浏览器中可以保持一致性。而且直接调用只能调用全局函数，不利于函数结构组织。
第二种：集成第一种的劣势。
第三种：集成第一种的劣势，且没有考虑三层分离。
第四种：且没有考虑三层分离。
第五种：如果脚本没用下载完毕，会修改url hash，如果协同写码，别人使用到url操作，且没有做去除hash处理，几率发生问题，如之前的测试。
第六种：不论会不会产生页面性能积极影响，about:blank作为额外的无语义内容就是让人不爽的。
第七种：这货不是一个标准的a标签，还记得之前说要看RFC和W3C标准嘛？
可能有的童鞋懒的找，我把内容贴一下：
Non-empty URL potentially surrounded by spaces
A URL that is not the empty string, optionally with leading and/or trailing space characters.
Absolute URL potentially surrounded by spaces
A valid IRI as defined in [RFC 3987], optionally with leading and/or trailing space characters.
接着我们在来看一个小东西，事件绑定次数，即句柄数量：
第一种：0，环保
第二种: 1
第三种: 2 周全的代价
第四种: 1
第五种: 1
第六种: 1
第七种: 1
我发现我有话痨属性，多提一个事情吧：
淘宝首页使用javascript: 10处
淘宝首页使用#: 10处
Github内页首页使用javascript: 0处
Github内页首页使用#: 9处
360首页使用javascript: 0处
360首页使用#: 7处
腾讯首页使用javascript: 37处
腾讯首页使用#: 11处
新浪首页使用javascript: 26处
新浪首页使用#: 0处
其他的大家自己搜索的玩呗~~
现在都流行开放式结局，那么，文章就此EOF。
至于选择哪个方案，我觉得大家都心里有数了，欢迎讨论~
原文链接： http://soulteary.com/2013/01/11/let-talk-about-tag-a.html
扫一扫
到【灌水乐园】发言
> 我来回应