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 相关文章推荐
JS继承--原型链继承和类式继承
Apr 08 Javascript
jQuery 三击事件实现代码
Sep 11 Javascript
jQuery实现渐变弹出层和弹出菜单的方法
Feb 20 Javascript
JavaScript操作XML文件之XML读取方法
Jun 09 Javascript
JS控制文本域只读或可写属性的方法
Jun 24 Javascript
微信小程序 页面传参实例详解
Nov 16 Javascript
webpack构建的详细流程探底
Jan 08 Javascript
JS设计模式之访问者模式定义与用法分析
Feb 05 Javascript
使用proxy实现一个更优雅的vue【推荐】
Jun 19 Javascript
基于js Canvas实现二次贝塞尔曲线
Dec 25 Javascript
Vue项目实现换肤功能的一种方案分析
Aug 28 Javascript
vue使用recorder.js实现录音功能
Nov 22 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实现ODBC数据分页显示一例
2006/10/09 PHP
php正则过滤html标签、空格、换行符的代码(附说明)
2010/10/25 PHP
使用PHP编写的SVN类
2013/07/18 PHP
PHP文件操作方法汇总
2015/07/01 PHP
ThinkPHP设置禁止百度等搜索引擎转码(简单实用)
2016/02/15 PHP
laravel使用Faker数据填充的实现方法
2019/04/12 PHP
PHP数组实际占用内存大小原理解析
2020/12/11 PHP
form中限制文本字节数js代码
2007/06/10 Javascript
JavaScript学习笔记(一) js基本语法
2011/10/25 Javascript
讨论html与javascript在浏览器中的加载顺序问题
2013/11/27 Javascript
JavaScript中的console.profile()函数详细介绍
2014/12/29 Javascript
Jquery 1.9.1源码分析系列(十二)之筛选操作
2015/12/02 Javascript
ES6新特性之函数的扩展实例详解
2017/04/01 Javascript
jQuery+Ajax实现用户名重名实时检测
2017/06/01 jQuery
layerUI下的绑定事件实例代码
2018/08/17 Javascript
Vue中使用ElementUI使用第三方图标库iconfont的示例
2018/10/11 Javascript
Django+vue跨域问题解决的详细步骤
2019/01/20 Javascript
Vue-input框checkbox强制刷新问题
2019/04/18 Javascript
解决IOS端微信H5页面软键盘弹起后页面下方留白的问题
2019/06/05 Javascript
使用VScode 插件debugger for chrome 调试react源码的方法
2019/09/13 Javascript
vue用BMap百度地图实现即时搜索功能
2019/09/26 Javascript
Python升级导致yum、pip报错的解决方法
2017/09/06 Python
python实现教务管理系统
2018/03/12 Python
Python 实现引用其他.py文件中的类和类的方法
2018/04/29 Python
python正则表达式匹配[]中间为任意字符的实例
2018/12/25 Python
在python中获取div的文本内容并和想定结果进行对比详解
2019/01/02 Python
使用Python中的reduce()函数求积的实例
2019/06/28 Python
python爬虫 urllib模块反爬虫机制UA详解
2019/08/20 Python
Pytorch之view及view_as使用详解
2019/12/31 Python
浅析Python中字符串的intern机制
2020/10/03 Python
HTML5 新标签全部总汇(推荐)
2016/06/13 HTML / CSS
英国探险旅游专家:Explore
2018/12/20 全球购物
生物技术毕业生自荐信
2013/10/23 职场文书
高三上学期学习自我评价
2014/04/23 职场文书
公务员年度考核登记表个人总结
2015/02/12 职场文书
Python爬虫爬取全球疫情数据并存储到mysql数据库的步骤
2021/03/29 Python