JavaScript的事件绑定(方便不支持js的时候)


Posted in Javascript onOctober 01, 2013

首先,比如我们使用JavaScript来加强我们的网页,但是我们要考虑到,如果用户的浏览器不支持JavaScript,或者用户disable了JavaScript的功能,那我们的网页能不能正常显示呢?例如下面的例子,

<a href = "#" onclick = "popUp('https://3water.com') ; return false;">

其中popUp这个函数是自定义的,新打开一个窗口来限制URL中的网页。但是如果当客户端不支持时,那这个网页就不能正常工作了。所以我们在这样做的使用,也考虑到更多,使用如下的代码就会显得更加合适。

<a href = "https://3water.com" onclick = "popUp(this.href) ; return false;"> 

接着,作者以CSS为例子。在我们使用CSS的过程中,我们发现,除了我们使用了<link>把CSS文件给加载进来外,我们没有在我们的网页内容中加入任何css相关的代码,这样就能很好的把structure和style分开了,即我们的css的代码没有侵入我们的主要代码里面。这样就算客户端不知道css,但是我们的主要内容客户还是可以看到的,我们的内容结构也能在客户那里显示出来。所以JavaScript相当于behavior层,css相当于presentation层。JavaScript也能像CSS一样做到没有侵入性。下面是书上的一个例子。

<a href = "https://3water.com" onclick = "popUp(this.href) ; return false;">

上面这段代码已经能保证在客户端不支持JavaScript的情况下仍然可以正常的工作,但是上面的代码中出现了onclick这样的event handler。所以现在我们使用像CSS中的方式来完成我们所要的功能。如下:

<a href = "https://3water.com" class = "popup">

这样,我们能在这个页面加载完成的时候,执行window.onload中,来检测哪些<a>是使用了class,然后统一使用popUp的方法。如下代码

var links = document.getElementsByTagName("a");
for (var i=0 ; i<links.length ; i++) {
 if (links[i].getAttribute("class") == "popup") {
  links[i].onclick = function() {
   popUp(this.getAttribute("href"));  //Attention use this in  this place. Because this is equals onClick = "popUp(this.href)"
   //so we cann't use links[i].
   return false;
  }
 }
}

这样就能更少地侵入我们html代码了。

  最后,作者讲了我们要做到向后兼容和JavaScript的最小化。向后兼容,我们可以使用类似if(document.getElementById)来测试这个方法时候存在,存在了才能使用。JavaScript代码的最小化主要是为了减少JavaScript,这样能加快我们网页的加载。

  下面我在看书的时候碰到不懂的问题,希望大虾们能帮忙解决一下。

   对于<script>应该放在哪里?JavaScript DOM编程艺术中所说的,我们可以把<script>放在</body>之前,不要放在<head></head>里,这样可以加快我们加载page的速度。不是很理解。

  

原文:

The placement of your scripts in the markup also plays a big part in initial load times. Traditionally,
we were told to always place scripts in the <head> portion of the document, but there's a problem with
that. Scripts in the <head> block the browser's ability to download additional files (such as images or
other scripts) in parallel. In general, the HTTP specification suggests that browsers download no more
than two items at the same time per hostname. While a script is downloading, however, the browser
won't start any other downloads, even on different hostnames, so everything must wait until the script
has finished.
If you're following the progressive enhancement and unobtrusive methodologies discussed earlier
in the chapter, then moving your <script> tags shouldn't be an issue. You can make your pages load
faster simply by including all your <script> tags at the end of the document, directly before the </body>

tag. When the scripts load, your window load events will still apply your changes to the document.

Javascript 相关文章推荐
jquery tools之tabs 选项卡/页签
Jul 25 Javascript
javascript 设为首页与加入收藏兼容多浏览器代码
Jan 11 Javascript
ASP.NET jQuery 实例16 通过控件CustomValidator验证RadioButtonList
Feb 03 Javascript
javascript实现ecshop搜索框键盘上下键切换控制
Mar 18 Javascript
jQuery实现返回顶部效果的方法
May 29 Javascript
javascript自定义in_array()函数实现方法
Aug 03 Javascript
jQuery编程中的一些核心方法简介
Aug 14 Javascript
JS中使用apply方法通过不同数量的参数调用函数的方法
May 31 Javascript
干货!教大家如何选择Vue和React
Mar 13 Javascript
vue2.0 父组件给子组件传递数据的方法
Jan 15 Javascript
Node 升级到最新稳定版的方法分享
May 17 Javascript
jQuery实现评论模块
Aug 19 jQuery
javascript不可用的问题探究
Oct 01 #Javascript
JavaScript DOM 编程艺术(第2版)读书笔记(JavaScript的最佳实践)
Oct 01 #Javascript
js有序数组的连接问题
Oct 01 #Javascript
jquery更换文章内容与改变字体大小代码
Sep 30 #Javascript
jquery配合css简单实现返回顶部效果
Sep 30 #Javascript
jquery提取元素里的纯文本不包含span等里的内容
Sep 30 #Javascript
jquery得到font-size属性值实现代码
Sep 30 #Javascript
You might like
PHP中通过语义URL防止网站被攻击的方法分享
2011/09/08 PHP
PHP程序员不应该忽略的3点
2015/10/09 PHP
谈谈你对Zend SAPIs(Zend SAPI Internals)的理解
2015/11/10 PHP
php中分页及SqlHelper类用法实例
2017/01/12 PHP
php实时倒计时功能实现方法详解
2017/02/27 PHP
jQuery EasyUI API 中文文档 - NumberBox数字框
2011/10/13 Javascript
jquery.ajax的url中传递中文乱码问题的解决方法
2014/02/07 Javascript
JavaScript省市联动实现代码
2014/02/15 Javascript
JavaScript事件委托的技术原理探讨示例
2014/04/17 Javascript
提交按钮的name='submit'引起的js失效问题及原因
2015/02/25 Javascript
jquery实现定时自动轮播特效
2015/12/10 Javascript
BootStrap轻松实现微信页面开发代码分享
2016/10/21 Javascript
IntersectionObserver API 详解篇
2016/12/11 Javascript
jQuery+ThinkPHP+Ajax实现即时消息提醒功能实例代码
2017/03/21 jQuery
js字符串处理之绝妙的代码
2019/04/05 Javascript
微信小程序template模版的使用方法
2019/04/13 Javascript
IE11下CKEditor在Bootstrap Modal中下拉问题的解决
2019/09/25 Javascript
解决vue路由name同名,路由重复的问题
2020/08/05 Javascript
微信小程序实现底部弹出模态框
2020/11/18 Javascript
Python 过滤字符串的技巧,map与itertools.imap
2008/09/06 Python
Python post请求实现代码实例
2020/02/28 Python
Python爬虫与反爬虫大战
2020/07/30 Python
python opencv实现简易画图板
2020/08/27 Python
StubHub新加坡:购买和出售全球活动门票
2017/03/10 全球购物
Mytheresa中国官网:德国时尚奢侈品商城
2017/08/04 全球购物
加拿大最大的体育用品、鞋类和服装零售商:Sport Chek
2018/11/29 全球购物
美国在线面料商店:Fashion Fabrics Club
2020/01/31 全球购物
酒店行政人事部经理职务说明书
2014/02/26 职场文书
机关作风建设自查报告
2014/10/22 职场文书
公司2014年度工作总结
2014/12/10 职场文书
幼儿园学前班幼儿评语
2014/12/29 职场文书
实习单位推荐信
2015/03/27 职场文书
民事代理词范文
2015/05/25 职场文书
医学生自荐信范文(2016精选篇)
2016/01/28 职场文书
宪法宣传标语100条
2019/10/15 职场文书
Pandas加速代码之避免使用for循环
2021/05/30 Python