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 相关文章推荐
GreyBox技术总结(转)
Nov 23 Javascript
javascript之Partial Application学习
Jan 10 Javascript
JavaScript修改css样式style动态改变元素样式
Dec 16 Javascript
如何让浏览器支持jquery ajax load 前进、后退功能
Jun 12 Javascript
JavaScript驾驭网页-DOM
Mar 24 Javascript
JS图片压缩(pc端和移动端都适用)
Jan 12 Javascript
原生js轮播(仿慕课网)
Feb 15 Javascript
解决AjaxFileupload 上传时会出现连接重置的问题
Jul 07 Javascript
Bootstrap 模态框多次显示后台提交多次BUG的解决方法
Dec 26 Javascript
vue使用自定义icon图标的方法
May 14 Javascript
Node.JS用纯JavaScript生成图片或滑块式验证码功能
Sep 12 Javascript
element-ui table组件如何使用render属性的实现
Nov 04 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+JS无限级可伸缩菜单详解(简单易懂)
2007/01/02 PHP
总结的一些PHP开发中的tips(必看篇)
2017/03/24 PHP
PHP性能测试工具xhprof安装与使用方法详解
2018/04/29 PHP
用JS写的一个TableView控件代码
2010/01/23 Javascript
JavaScript与DOM组合动态创建表格实例
2012/12/23 Javascript
JS实现点击下载的小例子
2013/07/10 Javascript
模拟jQuery中的ready方法及实现按需加载css,js实例代码
2013/09/27 Javascript
Javascript 构造函数详解
2014/10/22 Javascript
js实现Select下拉框具有输入功能的方法
2015/02/06 Javascript
跟我学习javascript的浮点数精度
2015/11/16 Javascript
JavaScript学习小结(7)之JS RegExp
2015/11/29 Javascript
jQuery之简单的表单验证实例
2016/07/07 Javascript
jQuery多文件异步上传带进度条实例代码
2016/08/16 Javascript
String字符串截取的四种方式总结
2016/11/28 Javascript
CSS+jQuery实现简单的折叠菜单
2016/12/20 Javascript
vue配置请求本地json数据的方法
2018/04/11 Javascript
关于vue中的ajax请求和axios包问题
2018/04/19 Javascript
vue 实现input表单元素的disabled示例
2019/10/28 Javascript
ES6学习笔记之let与const用法实例分析
2020/01/22 Javascript
Vant 中的Toast设置全局的延迟时间操作
2020/11/04 Javascript
使用优化器来提升Python程序的执行效率的教程
2015/04/02 Python
教你用 Python 实现微信跳一跳(Mac+iOS版)
2018/01/04 Python
Python实现霍夫圆和椭圆变换代码详解
2018/01/12 Python
Python动态参数/命名空间/函数嵌套/global和nonlocal
2019/05/29 Python
python多维数组分位数的求取方式
2020/03/03 Python
在django中实现choices字段获取对应字段值
2020/07/12 Python
用python读取xlsx文件
2020/12/17 Python
党员学习群众路线心得体会
2014/11/04 职场文书
仓库管理员岗位职责
2015/02/03 职场文书
2015暑期社会实践个人总结
2015/07/13 职场文书
学习型家庭事迹材料(2016精选版)
2016/02/29 职场文书
2016年乡镇综治宣传月活动总结
2016/03/16 职场文书
React Hook用法示例详解(6个常见hook)
2021/04/28 Javascript
使用springboot暴露oracle数据接口的问题
2021/05/07 Oracle
使用Redis做预定库存缓存功能
2022/04/02 Redis
关于windows server 2012 DC 环境 重启后蓝屏代码:0xc00002e2的问题
2022/05/25 Servers