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 Array扩展实现代码
Oct 14 Javascript
jquery实现智能感知连接外网搜索
May 21 Javascript
js切换光标示例代码
Oct 10 Javascript
js中arguments的用法(实例讲解)
Nov 30 Javascript
用unescape反编码得出汉字示例
Apr 24 Javascript
js ajaxfileupload.js上传报错的解决方法
May 05 Javascript
js时间比较 js计算时间差的简单实现方法
Aug 26 Javascript
jQuery完成表单验证的实例代码(纯代码)
Sep 30 jQuery
Vue2.0设置全局样式(less/sass和css)
Nov 18 Javascript
JS实现的图片选择顺序切换和循环切换功能示例【测试可用】
Dec 28 Javascript
react的滑动图片验证码组件的示例代码
Feb 27 Javascript
D3.js 实现带伸缩时间轴拓扑图的示例代码
Jan 20 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实现以只读方式打开文件的方法
2015/03/16 PHP
PHP实现图片防盗链破解操作示例【解决图片防盗链问题/反向代理】
2020/05/29 PHP
Firefox window.close()的使用注意事项
2009/04/11 Javascript
用jQuery技术实现Tab页界面之二
2009/09/21 Javascript
JS对象与JSON格式数据相互转换
2012/02/20 Javascript
javascript中encodeURI和decodeURI方法使用介绍
2013/05/06 Javascript
jQuery实现灰蓝风格标准二级下拉菜单效果代码
2015/08/31 Javascript
JavaScript实现图片轮播组件代码示例
2016/11/22 Javascript
JS公共小方法之判断对象是否为domElement的实例
2016/11/25 Javascript
工作中常用的js、jquery自定义扩展函数代码片段汇总
2016/12/22 Javascript
select自定义小三角样式代码(实用总结)
2017/08/18 Javascript
vue+webpack 打包文件 404 页面空白的解决方法
2018/02/28 Javascript
Angular7中创建组件/自定义指令/管道的方法实例详解
2019/04/02 Javascript
JS实现的对象去重功能示例
2019/06/04 Javascript
Vue form表单动态添加组件实战案例
2019/09/02 Javascript
jquery检测上传文件大小示例
2020/04/26 jQuery
JavaScript 几种循环方式以及模块化的总结
2020/09/03 Javascript
vue-cli3项目打包后自动化部署到服务器的方法
2020/09/16 Javascript
vue中如何自定义右键菜单详解
2020/12/08 Vue.js
js属性对象的hasOwnProperty方法的使用
2021/02/05 Javascript
python 上下文管理器使用方法小结
2017/10/10 Python
Python使用wget实现下载网络文件功能示例
2018/05/31 Python
python使用wxpy实现微信消息防撤回脚本
2019/04/29 Python
python+opencv实现摄像头调用的方法
2019/06/22 Python
Python中Subprocess的不同函数解析
2019/12/10 Python
html5的新玩法——语音搜索
2013/01/03 HTML / CSS
Booking.com西班牙:全球酒店预订
2018/03/30 全球购物
师德师风承诺书
2014/05/23 职场文书
乡镇党委书记第三阶段个人整改措施
2014/09/16 职场文书
人民调解协议书范本
2014/10/11 职场文书
领导干部个人整改措施落实情况汇报
2014/10/29 职场文书
特岗教师个人总结
2015/02/10 职场文书
2015年女职工工作总结
2015/05/15 职场文书
好员工观后感
2015/06/17 职场文书
python 爬取京东指定商品评论并进行情感分析
2021/05/27 Python
Python编程中内置的NotImplemented类型的用法
2022/03/23 Python