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高级程序设计阅读笔记(五) ECMAScript中的运算符(一)
Feb 27 Javascript
Firefox和IE兼容性问题及解决方法总结
Oct 08 Javascript
js鼠标滑轮滚动事件绑定的简单实例(兼容主流浏览器)
Jan 14 Javascript
jQuery简单实现网页选项卡特效
Nov 24 Javascript
jQuery验证插件validation使用指南
Apr 21 Javascript
javascript中innerText和innerHTML属性用法实例分析
May 13 Javascript
jquery不常用方法汇总
Jul 26 Javascript
js模仿php中strtotime()与date()函数实现方法
Aug 11 Javascript
浅析JavaScript中的变量复制、参数传递和作用域链
Jan 13 Javascript
Kindeditor单独调用单图上传增加预览功能的实例
Jul 31 Javascript
小程序Request的另类用法详解
Aug 09 Javascript
使用Layer组件弹出多个对话框(非嵌套)与关闭及刷新的例子
Sep 25 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超级全局变量
2010/01/26 PHP
关于URL最大长度限制的相关资料查证
2014/12/23 PHP
Symfony2框架学习笔记之表单用法详解
2016/03/18 PHP
PHP中Trait及其应用详解
2017/02/14 PHP
laravel获取不到session的三种解决办法【推荐】
2018/09/16 PHP
Jquery多选下拉列表插件jquery multiselect功能介绍及使用
2013/05/24 Javascript
JS常用表单验证方法总结
2014/05/22 Javascript
解决jquery版本冲突的有效方法
2014/09/02 Javascript
简单实现js进度条加载效果
2020/03/25 Javascript
记一次webpack3升级webpack4的踩坑经历
2018/06/12 Javascript
微信小程序修改swiper默认指示器样式的实例代码
2018/07/18 Javascript
Vue起步(无cli)的啊教程详解
2019/04/11 Javascript
微信小程序结合Storage实现搜索历史效果
2019/05/18 Javascript
vue将data恢复到初始状态 &amp;&amp; 重新渲染组件实例
2020/09/04 Javascript
js实现购物车商品数量加减
2020/09/21 Javascript
[44:21]Ti4 循环赛第四日 附加赛NEWBEE vs LGD
2014/07/13 DOTA
[48:48]VGJ.T vs Liquid 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
python+selenium开发环境搭建图文教程
2017/08/11 Python
Python的SimpleHTTPServer模块用处及使用方法简介
2018/01/22 Python
Python数据持久化shelve模块用法分析
2018/06/29 Python
tensor和numpy的互相转换的实现示例
2019/08/02 Python
详解Python 字符串相似性的几种度量方法
2019/08/29 Python
Python爬取豆瓣视频信息代码实例
2019/11/16 Python
python中Array和DataFrame相互转换的实例讲解
2021/02/03 Python
HTML5 解析规则分析
2009/08/14 HTML / CSS
德国最大的拼图在线商店:Puzzle.de
2016/12/17 全球购物
健身场所或家用健身设备:Life Fitness
2017/11/01 全球购物
全球性的奢侈品梦工厂:Forzieri(福喜利)
2019/02/20 全球购物
安全资料员岗位职责
2013/12/14 职场文书
幼儿园老师辞职信
2014/01/20 职场文书
酒店总经理岗位职责
2014/03/17 职场文书
医德医魂心得体会
2014/09/11 职场文书
重阳节慰问信
2015/02/15 职场文书
MySQL数据库超时设置配置的方法实例
2021/10/15 MySQL
python中tkinter复选框使用操作
2021/11/11 Python
关于mysql中时间日期类型和字符串类型的选择
2021/11/27 MySQL