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 ajax的success回调函数中实现按钮置灰倒计时
Nov 19 Javascript
原生javascript实现拖动元素示例代码
Sep 01 Javascript
jQuery插件ImageDrawer.js实现动态绘制图片动画(附源码下载)
Feb 25 Javascript
基于MVC方式实现三级联动(JavaScript)
Jan 23 Javascript
react-router JS 控制路由跳转实例
Jun 15 Javascript
基于easyui checkbox 的一些操作处理方法
Jul 10 Javascript
关于TypeScript中import JSON的正确姿势详解
Jul 25 Javascript
vue多级复杂列表展开/折叠及全选/分组全选实现
Nov 05 Javascript
jquery简单实现纵向的无缝滚动代码实例
Apr 01 jQuery
Vue+Element实现表格编辑、删除、以及新增行的最优方法
May 28 Javascript
Layui数据表格之单元格编辑方式
Oct 26 Javascript
15分钟学会vue项目改造成SSR(小白教程)
Dec 17 Javascript
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
构建简单的Webmail系统
2006/10/09 PHP
PHP中mysqli_affected_rows作用行数返回值分析
2014/12/26 PHP
利用PHP计算有多少小于当前数字的数字方法示例
2020/08/26 PHP
用Javascript实现锚点(Anchor)间平滑跳转
2009/09/08 Javascript
Jquery 插件开发笔记整理
2011/01/17 Javascript
基于jQuery实现的Ajax 验证用户名是否存在的实现代码
2011/04/06 Javascript
JS特殊函数(Function()构造函数、函数直接量)区别介绍
2013/05/19 Javascript
jquery $.each 和for怎么跳出循环终止本次循环
2013/09/27 Javascript
jquery下拉select控件操作方法分享(jquery操作select)
2014/03/25 Javascript
extjs每个组件要设置唯一的ID否则会出错
2014/06/15 Javascript
js实现按一下删除键删除整个单词附demo
2014/09/05 Javascript
将List对象列表转换成JSON格式的类实现方法
2016/07/04 Javascript
详解webpack打包第三方类库的正确姿势
2018/10/20 Javascript
Webstorm2016使用技巧(SVN插件使用)
2018/10/29 Javascript
vue中将html字符串转换成html后遇到的问题小结
2018/12/10 Javascript
Vue通过配置WebSocket并实现群聊功能
2019/12/31 Javascript
[01:11:35]Liquid vs LGD 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python 字典(dict)遍历的四种方法性能测试报告
2014/06/25 Python
Python正则表达式匹配ip地址实例
2014/10/09 Python
六个窍门助你提高Python运行效率
2015/06/09 Python
Python入门之三角函数sin()函数实例详解
2017/11/08 Python
python实现百万答题自动百度搜索答案
2018/01/16 Python
Python生成随机验证码代码实例解析
2020/06/09 Python
Django数据库迁移常见使用方法
2020/11/12 Python
俄罗斯最大的消费电子连锁零售商:Mvideo
2017/06/25 全球购物
银河香水:Galaxy Perfume
2019/03/25 全球购物
俄罗斯美容和健康网上商店:Созвездие Красоты
2019/07/23 全球购物
如何将整数int转换成字串String
2014/03/21 面试题
工程专业毕业生自荐信范文
2013/12/25 职场文书
初中学生评语大全
2014/04/24 职场文书
入党介绍人评语
2014/05/06 职场文书
小学红领巾广播稿(3篇)
2014/09/13 职场文书
教师师德承诺书2016
2016/03/25 职场文书
教你用Python写一个植物大战僵尸小游戏
2021/04/25 Python
Python学习之异常中的finally使用详解
2022/03/16 Python
Zabbix对Kafka topic积压数据监控的解决方案
2022/07/07 Servers