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 相关文章推荐
基于jQuery的日期选择控件
Oct 27 Javascript
把html页面的部分内容保存成新的html文件的jquery代码
Nov 12 Javascript
防止登录页面出现在frame中js代码
Jul 22 Javascript
javaScript中push函数用法实例分析
Jun 08 Javascript
JavaScript 常见安全漏洞和自动化检测技术
Aug 21 Javascript
javascript实现label标签跳出循环操作
Mar 06 Javascript
前端js弹出框组件使用方法
Aug 24 Javascript
angular中不同的组件间传值与通信的方法
Nov 04 Javascript
vue 实现复制内容到粘贴板clipboard的方法
Mar 17 Javascript
分享vue里swiper的一些坑
Aug 30 Javascript
webpack 代码分离优化快速指北
May 18 Javascript
Node.js 获取微信JS-SDK CONFIG的方法示例
May 21 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中OO之静态关键字以及类常量的详解
2013/06/07 PHP
Laravel框架实现发送短信验证功能代码
2016/06/06 PHP
如何判断图片地址是否失效
2007/02/02 Javascript
js removeChild 障眼法 可能出现的错误
2009/10/06 Javascript
jQuery.query.js 取参数的两点问题分析
2012/08/06 Javascript
面向对象继承实例(a如何继承b问题)(自写)
2013/07/01 Javascript
一个简单的动态加载js和css的jquery代码
2014/09/01 Javascript
node.js中的console.info方法使用说明
2014/12/09 Javascript
js实现编辑div节点名称的方法
2014/12/17 Javascript
利用JavaScript脚本实现滚屏效果的方法
2015/07/07 Javascript
KnockoutJS 3.X API 第四章之表单textInput、hasFocus、checked绑定
2016/10/11 Javascript
微信小程序 form组件详解
2016/10/25 Javascript
AngularJS实现与Java Web服务器交互操作示例【附demo源码下载】
2016/11/02 Javascript
js正则表达式验证表单【完整版】
2017/03/06 Javascript
浅谈Vue-cli单文件组件引入less,sass,css样式的不同方法
2018/03/13 Javascript
详解操作虚拟dom模拟react视图渲染
2018/07/25 Javascript
解决iview多表头动态更改列元素发生的错误的方法
2018/11/02 Javascript
基于Vue-Cli 打包自动生成/抽离相关配置文件的实现方法
2018/12/09 Javascript
vue-cli中安装方法(图文详细步骤)
2018/12/12 Javascript
微信小程序 image组件遇到的问题
2019/05/28 Javascript
使用layui+ajax实现简单的菜单权限管理及排序的方法
2019/09/10 Javascript
vue 判断页面是首次进入还是再次刷新的实例
2020/11/05 Javascript
理解Python垃圾回收机制
2016/02/12 Python
Python 修改列表中的元素方法
2018/06/26 Python
TensorFlow用expand_dim()来增加维度的方法
2018/07/26 Python
Python统计学一数据的概括性度量详解
2020/03/03 Python
天网面试题
2013/04/07 面试题
实习教师自我鉴定
2013/09/27 职场文书
关于青春的演讲稿
2014/05/05 职场文书
出国签证在职证明
2014/09/20 职场文书
2014大学生批评与自我批评思想汇报
2014/09/21 职场文书
微笑面对生活演讲稿
2014/09/23 职场文书
致运动员加油稿
2015/07/21 职场文书
认识实习感想
2015/08/10 职场文书
2016年大学校运会广播稿件
2015/12/21 职场文书
初中思想品德教学反思
2016/02/24 职场文书