javacript基础知识系列：知识点

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>

这样当点击目标元素，事件只会被触发一次。