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 相关文章推荐
将两个div左右并列显示并实现点击标题切换内容
Oct 22 Javascript
Node.js中调用mysql存储过程示例
Dec 20 Javascript
Js可拖拽放大的层拖动特效实现方法
Feb 25 Javascript
JS实现带提示的星级评分效果完整实例
Oct 30 Javascript
JavaScript修改作用域外变量的方法
Mar 25 Javascript
AngularJS 中的Promise --- $q服务详解
Sep 14 Javascript
使用bootstrap validator的remote验证代码经验分享(推荐)
Sep 21 Javascript
从零学习node.js之文件操作(三)
Feb 21 Javascript
ES6模块化的import和export用法方法总结
Aug 08 Javascript
浅谈关于angularJs中使用$.ajax的注意点
Aug 12 Javascript
深入理解ES6中let和闭包
Feb 22 Javascript
Js跳出两级循环方法代码实例
Sep 22 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中将网址转换为超链接的函数
2011/09/02 PHP
php 短链接算法收集与分析
2011/12/30 PHP
php实现快速排序的三种方法分享
2014/03/12 PHP
php快递单号查询接口使用示例
2014/05/05 PHP
PHP中addcslashes与stripcslashes函数用法分析
2016/01/07 PHP
PHPUnit测试私有属性和方法功能示例
2018/06/12 PHP
jQuery 解析xml文件
2009/08/09 Javascript
JavaScript 空位补零实现代码
2010/02/26 Javascript
js写一个字符串转成驼峰的实例
2013/06/21 Javascript
javascript 获取HTML DOM父、子、临近节点
2014/06/16 Javascript
jQuery制作仿Mac Lion OS滚动条效果
2015/02/10 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形菜单
2015/11/30 Javascript
基于JS实现移动端访问PC端页面时跳转到对应的移动端网页
2020/12/24 Javascript
Node.js环境下Koa2添加travis ci持续集成工具的方法
2017/06/19 Javascript
Node.js 中使用 async 函数的方法
2017/11/20 Javascript
webpack 单独打包指定JS文件的方法
2018/02/22 Javascript
Vuejs2 + Webpack框架里,模拟下载的实例讲解
2018/09/05 Javascript
vue 源码解析之虚拟Dom-render
2019/08/26 Javascript
微信小程序实现手势滑动效果
2019/08/26 Javascript
[01:01:41]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Magma BO3 第二场 1月31日
2021/03/11 DOTA
Python制作豆瓣图片的爬虫
2017/12/28 Python
Python进度条实时显示处理进度的示例代码
2018/01/30 Python
对TensorFlow中的variables_to_restore函数详解
2018/07/30 Python
利用nohup来开启python文件的方法
2019/01/14 Python
Python制作动态字符图的实例
2019/01/27 Python
Python中的单下划线和双下划线使用场景详解
2019/09/09 Python
关于Keras Dense层整理
2020/05/21 Python
全球在线商店:BerryLook
2019/04/14 全球购物
BAILEY 44官网:美国制造的女性服装
2019/07/01 全球购物
Watch Station官方网站:世界一流的手表和智能手表
2020/01/05 全球购物
工程师求职简历的自我评价分享
2013/10/10 职场文书
廉政教育心得体会
2014/01/01 职场文书
写给老婆的保证书
2015/02/27 职场文书
药品销售内勤岗位职责
2015/04/13 职场文书
合同范本之电脑出租
2019/08/13 职场文书
python3 字符串str和bytes相互转换
2022/03/23 Python