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 相关文章推荐
JavaScript arguments 多参传值函数
Oct 24 Javascript
javascript中关于执行环境的杂谈
Aug 14 Javascript
使用jQuery重置(reset)表单的方法
May 05 Javascript
60行js代码实现俄罗斯方块
Mar 31 Javascript
jQuery ajax中使用confirm,确认是否删除的简单实例
Jun 17 Javascript
JavaScript判断浏览器对CSS3属性是否支持的多种方法
Nov 13 Javascript
微信小程序购物商城系统开发系列-工具篇的介绍
Nov 21 Javascript
原生js更改css样式的两种方式
Mar 15 Javascript
js数组实现权重概率分配
Sep 12 Javascript
基于 Vue.js 2.0 酷炫自适应背景视频登录页面实现方式
Jan 17 Javascript
JavaScript 跨域之POST实现方法
May 07 Javascript
微信小程序实现写入读取缓存详解
Aug 30 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
php数组函数序列之rsort() - 对数组的元素值进行降序排序
2011/11/02 PHP
PHP的array_diff()函数在处理大数组时的效率问题
2011/11/27 PHP
PHP echo,print,printf,sprintf函数之间的区别与用法详解
2013/11/27 PHP
PHP反向代理类代码
2014/08/15 PHP
php计算一个文件大小的方法
2015/03/30 PHP
Yii2分页的使用及其扩展方法详解
2016/05/23 PHP
jQuery toggle()设置CSS样式
2009/11/05 Javascript
Jquery之美中不足小结
2011/02/16 Javascript
基于jquery的loading 加载提示效果实现代码
2011/09/01 Javascript
用js通过url传参把数据从一个页面传到另一个页面
2014/09/01 Javascript
JavaScript中的pow()方法使用详解
2015/06/15 Javascript
浅谈Sticky组件的改进实现
2016/03/22 Javascript
使用jquery实现的循环连续可停顿滚动实例
2016/11/23 Javascript
jQuery Jsonp跨域模拟搜索引擎
2017/06/17 jQuery
Vue精简版风格指南(推荐)
2018/01/30 Javascript
VUE 自定义组件模板的方法详解
2019/08/30 Javascript
vue实现购物车小案例
2019/09/27 Javascript
[01:16]2014DOTA2 TI专访C9战队EE:中国五强中会占三席
2014/07/10 DOTA
centos6.4下python3.6.1安装教程
2017/07/21 Python
Python运维开发之psutil库的使用详解
2018/10/18 Python
浅谈python脚本设置运行参数的方法
2018/12/03 Python
浅析使用Python搭建http服务器
2019/10/27 Python
python 实现二维列表转置
2019/12/02 Python
Python字符串函数strip()原理及用法详解
2020/07/23 Python
Python+OpenCV图像处理——打印图片属性、设置存储路径、调用摄像头
2020/10/22 Python
python绘制高斯曲线
2021/02/19 Python
IE兼容css3圆角的实现代码
2011/07/21 HTML / CSS
比利时的在线灯具店:Lampen24.be
2019/07/01 全球购物
女大学生自我鉴定
2013/12/09 职场文书
革命先烈的英雄事迹材料
2014/02/15 职场文书
园艺师求职信
2014/03/10 职场文书
私人会所最新创业计划书范文
2014/03/24 职场文书
离婚协议书的书写要求
2014/09/17 职场文书
教师师德师风整改措施
2014/10/24 职场文书
入党介绍人意见范文
2015/06/01 职场文书
简单总结SpringMVC拦截器的使用方法
2021/06/28 Java/Android