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 面向对象编程(2) 定义类
May 18 Javascript
JS获取键盘上任意按键的值(实例代码)
Nov 12 Javascript
JavaScript动态添加style节点的方法
Jun 09 Javascript
使用jQuery判断Div是否在可视区域的方法 判断div是否可见
Feb 17 Javascript
js数字舍入误差以及解决方法(必看篇)
Feb 28 Javascript
jQuery简单实现对数组去重及排序操作实例
Oct 31 jQuery
微信小程序数字滚动插件使用详解
Feb 02 Javascript
关于vue中 $emit的用法详解
Apr 12 Javascript
layDate插件设置开始和结束时间
Nov 15 Javascript
浅谈JS中几种轻松处理'this'指向方式
Sep 16 Javascript
layui数据表格 table.render 报错的解决方法
Sep 29 Javascript
Ant design vue中的联动选择取消操作
Oct 31 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生成静态页面的简单示例
2014/04/17 PHP
PHP实现图片旋转效果实例代码
2014/10/01 PHP
自己写的php curl库实现整站克隆功能
2015/02/12 PHP
Laravel使用Queue队列的技巧汇总
2019/09/02 PHP
javascript获取函数名称、函数参数、对象属性名称的代码实例
2014/04/12 Javascript
实例讲解JS中setTimeout()的用法
2016/01/28 Javascript
文本框只能输入数字的实现方法(兼容IE火狐)
2016/06/25 Javascript
JS实现将数字金额转换为大写人民币汉字的方法
2016/08/02 Javascript
深入理解Commonjs规范及Node模块实现
2017/05/17 Javascript
Vue导出页面为PDF格式的实现思路
2018/07/31 Javascript
vue移动端下拉刷新和上拉加载的实现代码
2018/09/08 Javascript
微信小程序中的店铺评分组件及vue中用svg实现的评分显示组件
2018/11/16 Javascript
Vuex的actions属性的具体使用
2019/04/14 Javascript
微信小程序实现锚点跳转
2020/11/23 Javascript
举例讲解Python中的迭代器、生成器与列表解析用法
2016/03/20 Python
Python学习入门之区块链详解
2017/07/25 Python
Python split() 函数拆分字符串将字符串转化为列的方法
2019/07/16 Python
CSS3媒体查询(Media Queries)介绍
2013/09/12 HTML / CSS
纯css3制作的火影忍者写轮眼开眼至轮回眼及进化过程实例
2014/11/11 HTML / CSS
详解CSS3:overflow属性
2020/11/17 HTML / CSS
中国电子产品外贸网站:MiniIntheBox
2017/02/06 全球购物
英国最大的在线运动补充剂商店:Discount Supplements
2017/06/03 全球购物
阿联酋优惠券服务:Living Kool
2019/12/12 全球购物
short s1 = 1; s1 = s1 + 1;有什么错? short s1 = 1; s1 += 1;有什么错?
2014/09/26 面试题
项目计划书范文
2014/01/09 职场文书
公务员政审单位鉴定材料
2014/05/16 职场文书
本科生导师推荐信范文
2014/05/18 职场文书
工商管理专业毕业生求职信
2014/05/26 职场文书
市场调研项目授权委托书范本
2014/10/04 职场文书
2015年食品安全宣传周活动总结
2015/07/09 职场文书
大学社团活动总结怎么写
2019/06/21 职场文书
2019假期福利管理制度!
2019/07/15 职场文书
一篇文章学会Vue中间件管道
2021/06/20 Vue.js
电脑只能进入安全模式无法正常启动的解决办法
2022/04/08 数码科技
nginx容器方式反向代理实战
2022/04/18 Servers
APP界面设计技巧和注意事项
2022/04/29 杂记