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高级程序设计(第3版)学习笔记6 初识js对象
Oct 11 Javascript
javascript中String对象的slice()方法分析
Dec 20 Javascript
JavaScript框架是什么?怎样才能叫做框架?
Jul 01 Javascript
js图片轮播手动切换效果
Nov 10 Javascript
Angularjs注入拦截器实现Loading效果
Dec 28 Javascript
jquery分页插件jquery.pagination.js使用方法解析
Apr 01 Javascript
无法获取隐藏元素宽度和高度的解决方案
Mar 07 Javascript
jquery.validate.js 多个相同name的处理方式
Jul 10 jQuery
vue+django实现一对一聊天功能的实例代码
Jul 17 Javascript
使用 JavaScript 创建并下载文件(模拟点击)
Oct 25 Javascript
Vue 的 v-model用法实例
Nov 23 Vue.js
vue本地构建热更新卡顿的问题“75 advanced module optimization”完美解决方案
Aug 05 Vue.js
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个人网站架设连环讲(二)
2006/10/09 PHP
php中ob函数缓冲机制深入理解
2015/08/03 PHP
PHP chr()函数讲解
2019/02/11 PHP
跟随鼠标旋转的文字
2006/11/30 Javascript
jQuery toggle()设置CSS样式
2009/11/05 Javascript
jQuery AnythingSlider滑动效果插件
2010/02/07 Javascript
jquery控制左右箭头滚动图片列表的实例
2013/05/20 Javascript
js设置组合快捷键/tabindex功能的方法
2013/11/21 Javascript
jquery表单验证框架提供的身份证验证方法(示例代码)
2013/12/27 Javascript
jquery中的ajax方法怎样通过JSONP进行远程调用
2014/05/04 Javascript
ExtJS中设置下拉列表框不可编辑的方法
2014/05/07 Javascript
处理文本部分内容的TextRange对象应用实例
2014/07/29 Javascript
Angular2 PrimeNG分页模块学习
2017/01/14 Javascript
详解浏览器缓存和webpack缓存配置
2018/07/06 Javascript
Vue Element 分组+多选+可搜索Select选择器实现示例
2018/07/23 Javascript
vue进入页面时滚动条始终在底部代码实例
2019/03/26 Javascript
详解JSON.stringify()的5个秘密特性
2020/05/26 Javascript
Python实现的多线程端口扫描工具分享
2015/01/21 Python
Python中字符串的格式化方法小结
2016/05/03 Python
Python正则表达式完全指南
2017/05/25 Python
详解Tensorflow数据读取有三种方式(next_batch)
2018/02/01 Python
Python中协程用法代码详解
2018/02/10 Python
Python使用sklearn实现的各种回归算法示例
2019/07/04 Python
最好的意大利皮夹克:D’Arienzo
2018/12/04 全球购物
介绍java中初始化块的使用
2012/09/11 面试题
市优秀教师事迹材料
2014/02/05 职场文书
国贸专业自荐信范文
2014/03/02 职场文书
培训主管的职业生涯规划
2014/03/06 职场文书
最美护士演讲稿
2014/08/27 职场文书
授权委托书协议书
2014/10/16 职场文书
详解Nginx 工作原理
2021/03/31 Servers
超级详细实用的pycharm常用快捷键
2021/05/12 Python
手把手教你怎么用Python实现zip文件密码的破解
2021/05/27 Python
Spring Boot 实现敏感词及特殊字符过滤处理
2021/06/29 Java/Android
详解Nginx 被动检查服务器的存活状态
2021/10/16 Servers
springboot中的pom文件 project报错问题
2022/01/18 Java/Android