js的事件绑定(方便不支持js的时候)
首先，比如我们使用JavaScript来加强我们的网页，但是我们要考虑到，如果用户的浏览器不支持JavaScript，或者用户disable了JavaScript的功能，那我们的网页能不能正常显示呢？例如下面的例子，
代码如下:
<a href = "#" onclick = "popUp('http://www.zhuxianfei.com') ; return false;">其中popUp这个函数是自定义的，新打开一个窗口来限制URL中的网页。但是如果当客户端不支持时，那这个网页就不能正常工作了。所以我们在这样做的使用，也考虑到更多，使用如下的代码就会显得更加合适。
代码如下:
<a href = "http://www.zhuxianfei.com" onclick = "popUp(this.href) ; return false;">
接着，作者以CSS为例子。在我们使用CSS的过程中，我们发现，除了我们使用了<link>把CSS文件给加载进来外，我们没有在我们的网页内容中加入任何css相关的代码，这样就能很好的把structure和style分开了，即我们的css的代码没有侵入我们的主要代码里面。这样就算客户端不知道css，但是我们的主要内容客户还是可以看到的，我们的内容结构也能在客户那里显示出来。所以JavaScript相当于behavior层，css相当于presentation层。JavaScript也能像CSS一样做到没有侵入性。下面是书上的一个例子。
代码如下:
<a href = "http://www.zhuxianfei.com" onclick = "popUp(this.href) ; return false;">
上面这段代码已经能保证在客户端不支持JavaScript的情况下仍然可以正常的工作，但是上面的代码中出现了onclick这样的event handler。所以现在我们使用像CSS中的方式来完成我们所要的功能。如下：
代码如下:
<a href = "http://www.zhuxianfei.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.
相关文章
- 本文给大家介绍了在C#中，事件(event)的概念和使用方法，文章适合一些初学者学习，主要讲解了一些概念和一些代码案例。...2020-06-25
- 这篇文章主要介绍了jQuery事件绑定用法,结合实例形式较为详细的分析了jQuery事件绑定的实现原理与相关注意事项,并附带了相关绑定方法的使用说明,重点介绍了bind和live的区别,需要的朋友可以参考下...2016-01-21
- 这篇文章主要介绍了C#事件实例详解的相关资料,需要的朋友可以参考下...2020-06-25
- 这篇文章主要演示了5个jQuery Mobile 触摸事件实例,需要的朋友可以参考下。...2016-06-12
- 这篇文章主要为大家详细介绍了easyUI下拉列表点击事件的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2017-05-22
Ubuntu15下mysql5.6.25不支持中文的解决办法
apt-get install 安装的，不是源码包安装的mysql1 修改mysql的配置文件/etc/mysql/conf.d/mysql.cnf在[mysql]的下方加入如下语句:(注：这个文件下没有配置，只有【mysql】)no-auto-rehash default-character-set=utf8/etc/...2015-10-21- 这篇文章主要介绍了详解C#中委托，事件与回调函数讲解,小编觉得挺不错的，现在就分享给大家，也给大家做个参考。...2020-06-25
- 这篇文章主要为大家详细介绍了C# TextBox数据绑定的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2020-06-25
- 这篇文章主要介绍了JavaScript为事件句柄绑定监听函数的方法,结合实例详细分析了常见的事件句柄绑定监听函数的实现技巧,并实例讲解了跨浏览器的实现方法,需要的朋友可以参考下...2015-12-17
- vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的,下面这篇文章主要给大家介绍了关于如何利用js实现Vue2.0中数据的双向绑定功能的相关资料,需要的朋友可以参考下...2021-07-19
jQuery绑定事件监听bind和移除事件监听unbind用法实例详解
这篇文章主要介绍了jQuery绑定事件监听bind和移除事件监听unbind用法,结合实例形式详细分析了绑定事件监听bind和移除事件监听unbind的具体使用技巧与相关注意事项,需要的朋友可以参考下...2016-01-21- 这篇文章主要介绍了C#之事件的知识点，文中代码非常详细，帮助大家更好的理解和学习，感兴趣的朋友可以参考下...2020-06-25
- 这篇文章主要为大家介绍了python编程使用PyQt5如何创建按钮及触发点击事件的示例解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步...2021-10-29
- 这篇文章主要介绍了C#移除所有事件绑定的方法,实例分析了C#事件绑定的移除方法,具有一定参考借鉴价值,需要的朋友可以参考下...2020-06-25
- 我们都见到过这些效果，用鼠标滚轮实现某个表单内的数字增加减少操作，或者滚轮控制某个按钮的左右，上下滚动。这些都是通过js对鼠标滚轮的事件监听来实现的。今天这里介绍的是一点简单的js对于鼠标滚轮事件的监听。不同浏...2014-06-07
- 这篇文章主要介绍了Vue2.x 的双向绑定原理，Vue 是利用的 Object.defineProperty() 方法进行的数据劫持，利用 set、get 来检测数据的读写。需要的朋友可以参考下面文章的具体内容...2021-09-27
详解JavaScript的AngularJS框架中的作用域与数据绑定
这篇文章主要介绍了JavaScript的AngularJS框架中的作用域与数据绑定,包括作用域的继承以及数据的单向和双向绑定等重要知识点,需要的朋友可以参考下...2016-03-07jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解
这篇文章主要介绍了jQuery中bind(),live(),delegate(),on()绑定事件方法,结合实例形式详细分析了bind(),live(),delegate(),on()方法绑定事件的具体使用技巧,并对比分析了四种方式的异同点,需要的朋友可以参考下...2016-01-21- 本文主要分享了jquery实现输入框实时输入触发事件的代码，代码简单易懂，需要的朋友一起来看下吧...2017-01-09
- 这篇文章主要介绍了C#中事件的动态调用实现方法,对比传统思路优劣给出了一个新的解决方案,需要的朋友可以参考下...2020-06-25