JavaScript知识要点:
1.Var
在申明变量的时候避免隐式的全局变量:
- 通过var创建的全局变量(任何函数之外的程序中创建)是不能被删除的。
- 无var创建的隐式全局变量(无视是否在函数中创建)是能被删除的。
1 function sum(x, y) { 2 // 不推荐写法: 隐式全局变量 3 result = x + y; 4 return result; 5 }
1 function sum(x, y) { 2 //推荐写法 局部变量 3 var result = x + y; 4 return result; 5 }
1 1 // 反例,勿使用 2 2 function foo() { 3 3 var a = b = 0; 4 4 // ...相当于var a = ( b=0 ) b 是隐式全局变量 5 5 }
var声明的全局变量是不能被delete删除的,但是隐式声明的全局变量可以被删除。
// 定义三个全局变量 var global_var = 1; global_novar = 2; // 反面教材 (function () { global_fromfunc = 3; // 反面教材 }()); // 试图删除 delete global_var; // false delete global_novar; // true delete global_fromfunc; // true // 测试该删除 typeof global_var; // "number" typeof global_novar; // "undefined" typeof global_fromfunc; // "undefined"
2.For循环与while
//优化的for循环和while循环 //第一种变化的形式: var i, myarray = []; for (i = myarray.length; i–-;) { // 内部代码 } //第二种使用while循环: var myarray = [], i = myarray.length; while (i–-) { //内部代码 }
对于for循环,与i++比较,避免了 i<myarray.length的比较 减少一次运算。
3>>preventDefault和stopPropagetion两个方法的区别:
preventDefault():阻止默认行为的发生,如:<a>标签连接到指定的地址:
如下代码:
View Code
1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 4 <title>JS阻止链接跳转</title> 5 <script type="text/javascript"> 6 function stopDefault( e ) { 7 if ( e && e.preventDefault ) 8 e.preventDefault(); 9 else 10 window.event.returnValue = false; 11 12 return false; 13 } 14 </script> 15 </head> 16 <body> 17 <a href="http://www.baidu.com" id="testLink">百度</a> 18 <script type="text/javascript"> 19 var test = document.getElementById('testLink'); 20 test.onclick = function(e) { 21 alert('我的链接地址是:' + this.href + ', 但是我不会跳转。'); 22 stopDefault(e); 23 } 24 </script> 25 </body> 26 </html>
此时点击百度链接,不会打开http://www.baidu.com,而只是弹出一个alert对话框,prevetnefault成功地阻止了默认行为
stopPropagation():阻止事件冒泡行为。
事件代理用到了两个在JavaSciprt事件中有两个特性:事件冒泡以及目标元素。当一个元素上的事件被触发的时候,比如说鼠标点击了一个按钮,同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡;这个事件从原始元素开始一直冒泡到DOM树的最上层。对任何一个事件来说,其目标元素都是原始元素,在我们的这个例子中也就是按钮。目标元素它在我们的事件对象中以属性的形式出现。使用事件代理的话我们可以把事件处理器添加到一个元素上,等待事件从它的子级元素里冒泡上来,并且可以很方便地判断出这个事件是从哪个元素开始的。
stopPropagation方法就是起到阻止js事件冒泡的作用。代码如下
View Code
1 <HTML> 2 <head> 3 <title> 阻止JS事件冒泡传递(cancelBubble 、stopPropagation)</title> 4 <meta name="keywords" content="JS,事件冒泡,cancelBubble,stopPropagation" /> 5 <script> 6 function doSomething (obj,evt) { 7 alert(obj.id); 8 var e=(evt)?evt:window.event; 9 if (window.event) { 10 e.cancelBubble=true; // IE下阻止冒泡 11 } else { 12 //e.preventDefault(); 13 e.stopPropagation(); // 其它浏览器下阻止冒泡 14 } 15 } 16 </script> 17 </head> 18 <body> 19 <div id="parent1" onclick="alert(this.id)" style="250px;background-color:yellow"> 20 <p>This is parent1 div.</p> 21 <div id="child1" onclick="alert(this.id)" style="200px;background-color:orange"> 22 <p>This is child1.</p> 23 </div> 24 <p>This is parent1 div.</p> 25 </div> 26 <br /> 27 <div id="parent2" onclick="alert(this.id)" style="250px;background-color:cyan;"> 28 <p>This is parent2 div.</p> 29 <div id="child2" onclick="doSomething(this,event);" style="200px;background-color:lightblue;"> 30 <p>This is child2. Will bubble.</p> 31 </div> 32 <p>This is parent2 div.</p> 33 </div> 34 </body> 35 </HTML>
这样当点击目标元素,事件只会被触发一次。