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 相关文章推荐
google jQuery 引用文件,jQuery 引用地址集合(jquery 1.2.6至jquery1.5.2)
Apr 24 Javascript
js Form.elements[i]的使用实例
Nov 13 Javascript
jquery中页面Ajax方法$.load的功能使用介绍
Oct 20 Javascript
javascript定义变量时加var与不加var的区别
Dec 22 Javascript
AngularJS基础 ng-if 指令用法
Aug 01 Javascript
浅析jQuery操作select控件的取值和设值
Dec 07 Javascript
Vue input控件通过value绑定动态属性及修饰符的方法
May 03 Javascript
react-native fetch的具体使用方法
Nov 01 Javascript
使用Vue实现图片上传的三种方式
Jul 17 Javascript
jQuery解析json格式数据示例
Sep 01 jQuery
vue中解决微信html5原生ios虚拟键返回不刷新问题
Oct 20 Javascript
微信小程序tab左右滑动切换功能的实现代码
Feb 08 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
收音机发烧友应当熟知的100条知识
2021/03/02 无线电
某大型网络公司应聘时的笔试题目附答案
2008/03/27 PHP
php mssql 数据库分页SQL语句
2008/12/16 PHP
PHP查询数据库中满足条件的记录条数(两种实现方法)
2013/01/29 PHP
win10环境PHP 7 安装配置【教程】
2016/05/09 PHP
ThinkPHP类似AOP思想的参数验证的实现方法
2019/12/18 PHP
SyntaxHighlighter语法高亮插件使用说明
2011/08/14 Javascript
用JS做的简单的可折叠的两级树形菜单
2013/09/21 Javascript
jquery实现的网页自动播放声音
2014/04/30 Javascript
jQuery中trigger()与bind()用法分析
2015/12/18 Javascript
详解从新建vue项目到引入组件Element的方法
2017/08/29 Javascript
Vue左滑组件slider使用详解
2020/08/21 Javascript
ant design pro中可控的筛选和排序实例
2020/11/17 Javascript
[02:54]DOTA2英雄基础教程 撼地者
2014/01/14 DOTA
[50:05]VGJ.S vs OG 2018国际邀请赛淘汰赛BO3 第二场 8.22
2018/08/23 DOTA
使用Python脚本对Linux服务器进行监控的教程
2015/04/02 Python
Python中定时任务框架APScheduler的快速入门指南
2017/07/06 Python
Tensorflow实现卷积神经网络用于人脸关键点识别
2018/03/05 Python
Python callable()函数用法实例分析
2018/03/17 Python
使用Pandas对数据进行筛选和排序的实现
2019/07/29 Python
django连接oracle时setting 配置方法
2019/08/29 Python
详解Python 中的容器 collections
2020/08/17 Python
纯CSS3绘制打火机动画火焰效果
2016/07/18 HTML / CSS
eBay英国购物网站:eBay.co.uk
2019/06/19 全球购物
任命书格式
2014/06/05 职场文书
花坛标语大全
2014/06/30 职场文书
党支部三会一课计划
2014/09/24 职场文书
大学生创业事迹材料
2014/12/30 职场文书
2015毕业生简历自我评价
2015/03/02 职场文书
大学生逃课检讨书
2015/05/04 职场文书
开学第一周值周总结
2015/07/16 职场文书
宿舍管理制度范本
2015/08/07 职场文书
2016年大学生社会实践心得体会
2015/10/09 职场文书
修辞手法有哪些?
2019/08/29 职场文书
小型企业的绩效考核制度模板
2019/11/21 职场文书
Sleuth+logback 设置traceid 及自定义信息方式
2021/07/26 Java/Android