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学习笔记 获取jQuery对象
Sep 19 Javascript
js 使用form表单select类实现级联菜单效果
Dec 19 Javascript
jquery插件之信息弹出框showInfoDialog(成功/错误/警告/通知/背景遮罩)
Jan 09 Javascript
JQuery点击事件回到页面顶部效果的实现代码
May 24 Javascript
详解XMLHttpRequest(二)响应属性、二进制数据、监测上传下载进度
Sep 14 Javascript
js判断手机号是否正确并返回的实现代码
Jan 17 Javascript
JS中showModalDialog关闭子窗口刷新主窗口用法详解
Mar 25 Javascript
jQuery鼠标悬停内容动画切换效果
Apr 27 jQuery
Vue 组件间的样式冲突污染
Aug 31 Javascript
js实现跟随鼠标移动的小球
Aug 26 Javascript
Vue实现导航栏菜单
Aug 19 Javascript
vue select 获取value和lable操作
Aug 28 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&amp;java(二)
2006/10/09 PHP
ThinkPHP后台首页index使用frameset时的注意事项分析
2014/08/22 PHP
WordPress中重置文章循环的rewind_posts()函数讲解
2016/01/11 PHP
Yii rules常用规则示例
2016/03/15 PHP
jQuery 常见开发使用技巧总结
2009/12/26 Javascript
浅谈nodeName,nodeValue,nodeType,typeof 的区别
2015/01/13 Javascript
jQuery自定义添加&quot;$&quot;与解决&quot;$&quot;冲突的方法
2015/01/19 Javascript
Jquery中offset()和position()的区别分析
2015/02/05 Javascript
javascript感应鼠标图片透明度显示的方法
2015/02/24 Javascript
jQuery中on绑定事件后引发的事件冒泡问题如何解决
2016/05/25 Javascript
解决微信浏览器Javascript无法使用window.location.reload()刷新页面
2016/06/21 Javascript
js本地图片预览实现代码
2016/10/09 Javascript
Bootstrap基本布局实现方法详解
2016/11/25 Javascript
WEB开发之注册页面验证码倒计时代码的实现
2016/12/15 Javascript
基于jQuery实现简单人工智能聊天室
2017/02/10 Javascript
bootstrap中添加额外的图标实例代码
2017/02/15 Javascript
解决vue中无法动态修改jqgrid组件 url地址的问题
2018/03/01 Javascript
webpack 插件html-webpack-plugin的具体使用
2018/04/09 Javascript
vue.js自定义组件directives的实例代码
2018/11/09 Javascript
微信小程序select下拉框实现效果
2019/05/15 Javascript
Python下实现的RSA加密/解密及签名/验证功能示例
2017/07/17 Python
Django 2.0版本的新特性抢先看!
2018/01/05 Python
Python函数和模块的使用总结
2019/05/20 Python
python3发送邮件需要经过代理服务器的示例代码
2019/07/25 Python
python实现BP神经网络回归预测模型
2019/08/09 Python
python2.7使用scapy发送syn实例
2020/05/05 Python
详解tensorflow2.x版本无法调用gpu的一种解决方法
2020/05/25 Python
python有几个版本
2020/06/17 Python
自我鉴定范文
2013/11/10 职场文书
开学典礼决心书
2014/03/11 职场文书
最新大学生创业计划书写作攻略
2014/04/02 职场文书
《与朱元思书》的教学反思
2014/04/17 职场文书
大学生党员批评与自我批评范文
2014/10/14 职场文书
公积金接收函格式
2015/01/30 职场文书
从事会计工作年限证明
2015/06/23 职场文书
实习感想范文
2015/08/10 职场文书