zoukankan      html  css  js  c++  java
  • 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> 

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

  • 相关阅读:
    如何在Oracle中复制表结构和表数据
    linux --备份oracle
    Jira-Clone与发邮件的使用
    C# lock关键词/lock语句块、线程锁
    HTML5实现简单圆周运动示例
    C#使用FFmpeg 将视频格式转换成Gif图片示例
    C#使用FFmpeg 将视频格式转换成MP4示例
    ffmpeg ffplay ffprobe资料整理
    Asp.Net MVC是否针对每次请求都重新创建一个控制器实例
    Asp.Net MVC--Controller激活2
  • 原文地址:https://www.cnblogs.com/colorstory/p/2584654.html
Copyright © 2011-2022 走看看