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 相关文章推荐
ImageFlow可鼠标控制图片滚动
Jan 30 Javascript
jquery scroll()区分横向纵向滚动条的方法
Apr 04 Javascript
Javascript中拼接大量字符串的方法
Feb 05 Javascript
静态页面html中跳转传值的JS处理技巧
Jun 22 Javascript
手机Web APP如何实现分享多平台功能
Aug 19 Javascript
AngularJS实现标签页的两种方式
Sep 05 Javascript
jQuery实现frame之间互通的方法
Jun 26 jQuery
jquery+css3实现熊猫tv导航代码分享
Feb 12 jQuery
js实现弹出框的拖拽效果实例代码详解
Apr 16 Javascript
微信小程序实现多行文字超出部分省略号显示功能
Oct 23 Javascript
node.js 如何监视文件变化
Sep 01 Javascript
36个正则表达式(开发效率提高80%)
Nov 17 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
IIS安装Apache伪静态插件的具体操作图文
2013/07/01 PHP
php中过滤非法字符的具体实现
2013/10/29 PHP
php简单中奖算法(实例)
2017/08/15 PHP
php根据命令行参数生成配置文件详解
2019/03/15 PHP
PHP中散列密码的安全性分析
2019/07/26 PHP
php源码的使用方法讲解
2019/09/26 PHP
php pdo连接数据库操作示例
2019/11/18 PHP
Javascript 两个窗体之间传值实现代码
2009/09/25 Javascript
JavaScript 页面坐标相关知识整理
2010/01/09 Javascript
javascript实现焦点滚动图效果 具体方法
2013/06/24 Javascript
查找iframe里元素的方法可传参
2013/09/11 Javascript
JS按字节截取字符长度实例
2013/11/20 Javascript
Node.js中使用Buffer编码、解码二进制数据详解
2014/08/16 Javascript
jquery.cookie.js使用指南
2015/01/05 Javascript
ECMAScript6函数默认参数
2015/06/12 Javascript
JS使用单链表统计英语单词出现次数
2016/06/16 Javascript
浅谈JavaScript的函数及作用域
2016/12/30 Javascript
Vue常用指令V-model用法
2017/03/08 Javascript
JavaScript事件处理程序详解
2017/09/19 Javascript
基于angular-utils-ui-breadcrumbs使用心得(分享)
2017/11/03 Javascript
vue+element实现批量删除功能的示例
2018/02/28 Javascript
详解vue中axios请求的封装
2019/04/08 Javascript
微信小程序仿今日头条导航栏滚动解析
2019/08/20 Javascript
vue中nextTick用法实例
2019/09/11 Javascript
Vue开发环境跨域访问问题
2020/01/22 Javascript
python pandas库中DataFrame对行和列的操作实例讲解
2018/06/09 Python
画pytorch模型图,以及参数计算的方法
2019/08/17 Python
python简单利用字典破解zip文件口令
2020/09/07 Python
浅谈anaconda python 版本对应关系
2020/10/07 Python
五年后的职业生涯规划
2014/03/04 职场文书
三年级评语大全
2014/04/23 职场文书
文明礼仪标语
2014/06/13 职场文书
电话客服专员岗位职责
2014/06/28 职场文书
四风对照检查材料范文
2014/09/27 职场文书
致三级跳运动员加油稿
2015/07/21 职场文书
php解析非标准json、非规范json的方式实例
2022/05/10 PHP