这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要为大家详细介绍了 javascript 事件绑定使用方法, 具有一定的参考价值,感兴趣的小伙伴们可以参考一下
由于 html 是从上至下加载的,通常我们如果在 head 部分引入 javascript 文件,那么我们都会在 javascript 的开头添加 window.onload 事件,防止在文档问加载完成时进行 DOM 操作所出现的错误。如果有多个 javascript 文件,那么极有可能出现多个 window.onload 事件,但是最后起作用的只有一个,这时候就需要使用事件绑定来解决这个问题了。
IE 方式 attachEvent(事件名称, 函数),绑定事件处理函数 detachEvent(事件名称, 函数),解除绑定
DOM 方式 addEventListener(事件名称, 函数, 捕获) removeEventListener(事件名称, 函数, 捕获)
- <!DOCTYPE HTML>
- <html>
- <head>
- <meta charset="utf-8">
- <title>
- 无标题文档
- </title>
- <script>
- window.onload = function() {
- var oBtn = document.getElementById('btn1');
- oBtn.onclick = function() {
- alert('a');
- };
- oBtn.onclick = function() {
- alert('b');
- };
- };
- </script>
- </head>
- <body>
- <input id="btn1" type="button" value="按钮" />
- </body>
- </html>
这段代码,运行结果是弹出 b,因为有两个 oBtn 的点击事件,但是只执行了最后一个,这时候就体现出事件绑定的重要性了。
- <!DOCTYPE HTML>
- <html>
- <head>
- <meta charset="utf-8">
- <title>
- 无标题文档
- </title>
- <script>
- window.onload = function() {
- var oBtn = document.getElementById('btn1');
- //IE浏览器
- if (oBtn.attachEvent) {
- oBtn.attachEvent('onclick',
- function() {
- alert('a');
- });
- oBtn.attachEvent('onclick',
- function() {
- alert('b');
- });
- }
- //其他浏览器
- else {
- oBtn.addEventListener('click',
- function() {
- alert('a');
- },
- false);
- oBtn.addEventListener('click',
- function() {
- alert('b');
- },
- false);
- }
- };
- </script>
- </head>
- <body>
- <input id="btn1" type="button" value="按钮" />
- </body>
- </html>
当你使用事件绑定的时候,那么两次点击事件都会执行,只是执行顺序在不同浏览器是不同的。在 IE 中是自下而上执行,而在其他浏览器中是自上而下,不过由于 alert 的特殊性我们可以看出差别,其他语句基本等同于没有差别,但是在对于一些对时间要求严格是事件的使用时还是需要注意的,比如之前有一篇文章图片轮播中的 setInterval 对时间的细微的差别最后导致滚动混乱。 基于原生 javascript 的图片轮播 domo
最后将我们的代码整理成函数,便于之后的使用
- function myAddEvent(obj, ev, fn)
- {
- if(obj.attachEvent)
- {
- obj.attachEvent('on'+ev, fn);
- }
- else
- {
- obj.addEventListener(ev, fn, false);
- }
- }
这时候如果需要使用多个 window.onload 事件其实就和使用多个 oBtn.onclick 事件差不多了。如下调用函数即可。
- myAddEvent(window,'load',function ()
- {
- alert('a');
- });
- myAddEvent(window,'load',function ()
- {
- alert('b');
来源: http://www.phperz.com/article/17/0513/331040.html