Résumé de l'apprentissage JavaScript [4] JS en profondeur

1. Instruction de contrôle de flux JS

(1), jugement if

L'instruction if exécute le code correspondant en fonction de la condition étant vraie.

L'instruction if...else est le code après if est exécuté lorsque la condition spécifiée est vraie, et le code après else est exécuté lorsque la condition n'est pas vraie.

If...else Les instructions imbriquées sélectionnent l'un des blocs de code correspondants à exécuter dans plusieurs conditions.

L'instruction if convient à tout type de données et peut gérer des relations logiques complexes.

　 (2), instruction switch

Lorsqu'il y a de nombreux choix, switch est plus pratique à utiliser que if...else Il a une structure simple et est spécialement conçu pour des choix multiples, mais il ne peut gérer que plusieurs relations logiques énumérées. Cette déclaration peut également être complétée en utilisant if, cela dépend des préférences personnelles.

Comment fonctionne l'instruction switch : créez d'abord une expression, généralement une variable, puis comparez la valeur de l'expression avec la valeur de chaque cas dans l'instruction switch. Si elles correspondent, l'instruction après le cas est. exécutée Si elle ne correspond à aucune valeur de cas, l'instruction après la valeur par défaut sera exécutée. Lors de l'utilisation d'une instruction switch, break doit être utilisé après chaque instruction case pour sortir de la boucle et empêcher l'exécution du cas suivant.

var d = new Date().getDay(); //如果今天不是周末，则提示默认消息
 switch (d){     
 case 6:         
 alert("今天是星期六");         
 break;     
 case 0:         
 alert("今天是星期天");         
 break;     
 default:         
 alert("同志尚未努力，革命仍需成功。"); 
 }

Lors de la comparaison, l'instruction switch utilise la congruence au lieu de l'égalité, vous devez donc prêter une attention particulière lors de la correspondance des chaînes et des nombres.

//使用switch语句将字符串与数字做比较
 //返回：不等于，执行default语句
 var n = '5'; switch(n){     
 case 5:         
 alert('等于，执行case语句');         
 break;     
 default:         
 alert('不等于，执行default语句'); } 
 //使用if语句将字符串与数字做比较
 //返回：等于
 var n = '2'; if(n == 2){     
 alert('等于'); 
 }else{     
 alert('不等于'); 
 } 
 //将case的值改为字符串再做比较
 //返回：等于，执行case语句
 var n = '2'; switch(n){     
 case '2':         
 alert('等于，执行case语句');         
 break;     
 default:         
 alert('不等于，执行default语句'); 
 } 
 
 //使用全等再做比较
 //返回：不等于
 var n = '2'; 
 if(n===2){     
 alert('等于'); }else{     
 alert('不等于'); }

(3), boucle for

Beaucoup de choses ne sont pas faites une seule fois, mais doivent être faites à plusieurs reprises. Par exemple, imprimez 10 copies d'un document, une copie à la fois, et répétez cette action jusqu'à ce que l'impression soit terminée. Ce genre de chose se fait à l'aide d'une boucle for. Une boucle consiste à exécuter à plusieurs reprises un morceau de code avec une valeur différente à chaque fois.

Ce qui suit est une petite application d'une boucle for. Supposons qu'il y ait 1.2.3 ... 10 RMB avec des dénominations différentes. Calculez le nombre total de RMB.

var sum = 0; for(var rmb=1; rmb<=10; rmb++){ 
     sum += rmb; } alert(&#39;一共有: &#39; + sum + &#39;元&#39;);    //返回：一共有：55元

(4), boucle while

La boucle while a la même fonction que la boucle for Tant que la condition est spécifiée comme vraie, la boucle peut être exécutée jusqu'à ce que la boucle for soit exécutée. la condition n’est plus remplie.

//使用while循环输出5个数字
 var i = 0;    　　//第一部分：初始化，给一个初始的值，让i从0循环
 while(i < 5){    //第二部分：条件。成立继续循环，不成立退出
     alert(i);    //第三部分：语句
     i++;　　　　　//第四部分：自增
 } //while循环使用比较复杂，使用for循环更简洁。
 //for(初始化;条件;自增){语句}

(5), boucle do...while

La structure principale de la boucle do...while et de la boucle while est fondamentalement la même, mais la boucle vérifiera si le la condition est d'exécuter le bloc de code une fois avant qu'il ne soit vrai et de répéter la boucle si la condition est vraie. Il y a un léger problème avec cette boucle, car elle exécute d'abord le code puis détermine les conditions. Si les conditions sont inappropriées, elle entrera dans une boucle infinie, provoquant le crash du navigateur.

 /*
 语法： do{   执行语句 } while(条件); */
 
 //操作有风险，尝试需谨慎
 //若将循环条件改为：num <= 6 会导致浏览器崩溃  
 var num = 6; do{     document.write("数字:" + num + "<br>");     num -= 1; } while(num > 0);

(6), instruction de gestion des erreurs JS

　L'instruction try...catch est utilisée pour la gestion des exceptions. L'instruction try est utilisée pour détecter les erreurs dans les blocs de code et indiquer le segment de code qui doit être traité. L'instruction catch est utilisée pour gérer les erreurs générées dans l'instruction try. L'instruction try est exécutée en premier Si une erreur se produit pendant l'opération, le code de l'instruction try sera ignoré pour exécuter l'instruction dans catch. Si aucune erreur ne se produit, les instructions contenues dans catch ne sont pas exécutées. Généralement, les instructions try...catch peuvent être utilisées pour gérer les erreurs prévisibles. L'instruction

try{     
document.write("开始执行try语句" + &#39;<br>&#39;);     
document.write("还没抛出错误" + &#39;<br>&#39;);     
alert(x);        //抛出错误
     alert(&#39;123&#39;);    //没被执行
 } catch(e){     
 document.write("捕捉到错误，开始执行catch语句" + &#39;<br>&#39;);     
 document.write("错误类型: " + e.name + &#39;<br>&#39;);     
 document.write("错误信息: " + e.message);     
 alert(&#39;x&#39;); }

throw peut être utilisée pour créer des erreurs personnalisées. Le terme officiel est : créer ou lever une exception. Syntaxe : lancer 'Objet d'exception'. ​

L'instruction throw peut être utilisée avec l'instruction try...catch pour contrôler le flux du programme et générer des messages d'erreur précis.

//输入0到10之间的数字，如果输入错误，会抛出一个错误，catch会捕捉到错误，并显示自定义的错误消息。
 <body>
 <input id="txt" type="text"/>
 <span id="demo" style="font-weight:bold;"></span><br>
 <input type="button" value="检测输入" onclick="error()">
 <script> function error(){     
 try{         
 var x = document.getElementById("txt").value;         
 var y = document.getElementById("demo");         
 y.style.color = &#39;red&#39;;         
 if(x == &#39;&#39;) throw &#39;输入不能为空&#39;;         
 if(isNaN(x)) throw &#39;请输入数字&#39;;         
 var num = [7,8,9];         
 for(var i=0; i<num.length; i++){             
 if(x == num[i]){                 
 throw &#39;该数字已经存在&#39;;             
 }         
 }         
 if(x == 0){             
 throw &#39;输入不能为0&#39;;         
 }         
 else if(x > 10){             
 throw &#39;数字太大了&#39;;         
 }         
 else if(x <= 3){             
 throw &#39;数字太小了&#39;;         
 }         
 else{             
 y.style.color = &#39;green&#39;;             
 y.innerHTML = &#39;OK&#39;;         
 }     
 }     
 catch(e){         
 y.innerHTML = &#39;错误提示：&#39; + e + &#39;！&#39;;     
 } 
 } 
 </script>
 </body>

(7), Sortir de la boucle

L'instruction break est utilisée pour sortir de la boucle actuelle et quitter directement la boucle pour exécuter le code suivant, c'est-à-dire terminer la boucle entière sans faire d’autres jugements. L'instruction continue saute uniquement hors de cette boucle et continue d'exécuter la boucle suivante, c'est-à-dire termine cette boucle, puis détermine s'il faut exécuter la boucle suivante. return peut terminer l’exécution du corps de la fonction et renvoyer une valeur.

for(var i=0; i<6; i++){     if(i == 3) break;    //当i=3时跳出整个循环，不再执行循环
     alert(i);    //返回：0,1,2
 } 
 for(var i=0; i<6; i++){     if(i == 3) continue;    //当i=3时跳出本次循环，继续执行后面循环
     alert(i);    返回：0,1,2,4,5
 }

2. JSON

　JSON (JavaScript Object Notation) : notation d'objet JS. JSON est principalement utilisé pour stocker et échanger des informations de données, similaire à XML, mais comparé à XML, JSON est plus facile à lire et à écrire, et plus facile à analyser.

La syntaxe JSON est un sous-ensemble de la syntaxe de représentation d'objet JS : les données sont présentées dans des paires clé-valeur séparées par des virgules, les accolades contiennent des objets et les crochets contiennent des tableaux.

Le format d'écriture de la syntaxe JSON : "name" : "value", "name" : "value"

Le nom et la valeur sont contenus entre guillemets doubles et séparés par des deux-points. des données sont séparées par des virgules. C'est facile à comprendre, contrairement à name = "value" en JS.

　Les valeurs JSON peuvent être : des nombres (y compris des entiers et des décimales), des chaînes (entre guillemets), des valeurs booléennes (vrai ou faux), des objets (entre accolades), Tableau (entre crochets) ou null.

JSON est du texte brut, généralement utilisé par le serveur pour transférer des données vers la page Web, obtenir des données JSON du serveur, puis utiliser les données de la page Web.

　 (1), objet JSON

var json = {"a": 12, "b": "abc", "c":[1,2,3]}; //返回第一项的值：
 alert(json.a); 
 //修改第二项的值
 alert(json.b = "xyz"); 
 //返回第三项数组中第一项的值
 alert(json.c[0]);

(2), JSON et tableau

Le même point :

Les deux peuvent renvoyer une certaine valeur via indice La valeur de l'article. Vous pouvez utiliser des boucles. Bien que JSON n'ait pas d'attribut de longueur et ne puisse pas utiliser de boucles for, vous pouvez utiliser des boucles for...in pour effectuer les mêmes actions que les boucles for.

Les tableaux peuvent également utiliser des boucles for...in, mais il est préférable d'utiliser des boucles for. La boucle for...in parcourt les propriétés de l'objet, pas les éléments du tableau.

Différences :

　　JSON 的下标是字符串，数组的下标为数字。JSON 没有 length 属性，数组有该属性。

var arr = [12,5,7]; var json = {"a":12,"b":5,"c":7}; 
 alert(arr[0]);    　　//返回：12
 alert(json["a"]);    //返回：12
 
 alert(arr.length);　　　　//返回：3
 alert(json.length);　　　//返回：undefined
 
 //数组for循环
 for(var i=0; i<arr.length; i++){     alert(&#39;第&#39; + (i+1) + &#39;个数据是：&#39; + arr[i]); } alert(typeof i);    //返回：number
 
 //数组使用for...in循环
 for(var i in arr){     alert(&#39;第&#39; + (i+1) + &#39;个数据是：&#39; + arr[i]); } alert(typeof i);    //返回：string
 
 //JSON使用for...in循环
 for(var i in json){     alert(&#39;第&#39; + i + &#39;个数据是：&#39; + json[i]); }

　　(3)、JSON 数组对象

<body>
 <p>
 姓　名: <span id="fname"></span><br> 
 性　别: <span id="gender"></span><br>
 员工号: <span id="num"></span><br> 
 修改姓名: <span id="lname"></span><br> 
 </p> 
 <script> var staff = [     {"name" : "小明", "sex" : "男", "id" : 1}, 
     {"name" : "小白", "sex" : "男", "id" : 2}, 
     {"name" : "小红", "sex" : "女", "id" : 3} ]; 
     var x = document.getElementById("fname"); 
     var y = document.getElementById("gender"); 
     var z = document.getElementById("num"); 
     var n = document.getElementById("lname"); //访问对象数组中第一项的值：
 x.innerHTML = staff[0].name; y.innerHTML = staff[0].sex; z.innerHTML = staff[0].id; 
 //修改数据：
 n.innerHTML = staff[1].name = &#39;大白&#39;; </script>
 </body>

 　　(4)、JSON 字符串对象

var str = '{"name":"小明", "sex":"男", "age":21}';
var toObj = JSON.parse(str);　　//JSON字符串转换为JSON对象alert(toObj.name);
alert(typeof toObj);    //返回：object
var json = {"name":"小红", "sex":"女", "age":18};
var toStr = JSON.stringify(json);　　//JSON对象转换为JSON字符串
alert(toStr);    //返回字符串alert(json.age);
alert(typeof toStr);    //返回：string

(5)、JSON 应用

　　当需要表示一组数据时，JSON 不但能够提高可读性，而且还可以减少复杂性。JSON 能够表示多个值，每个值又可包含多个值，例如要表示一个用户列表信息，就可以将所有信息存储在一个变量中，分成多项，每项中又可分成多个条目，每个条目中记录一个用户的信息。

var userName = {     
"first": [{         
"name": "路飞",         
"sex": "男",         
"tel": "aaa"    
 },  {         
 "name": "索罗",         
 "sex": "男",         
 "tel": "bbb"     
 }, {         
 "name": "娜美",         
 "sex": "女",         
 "tel": "ccc"     }], 
     "second": [{         
     "name": "卡卡西",         
     "sex": "男",         
     "tel": "ddd"     
     }, {         
     "name": "鸣人",         
     "sex": "男",         
     "tel": "fff"     
     }, {         
     "name": "佐助",         
     "sex": "男",         
     "tel": "eee"     
     }, {         
     "name": "皱田",         
     "sex": "女",         
     "tel": "sss"     
     }], 
     "third": [{         
     "name": "小明",         
     "sex": "男",         
     "tel": "xxx"     
     },{         
     "name": "小红",         
     "sex": "女",         
     "tel": "zzz"     
     }] 
     }; 
 //获取用户的信息：
 alert(userName.first[1].name + ' \n ' + userName.first[1].sex + '\n '+ userName.first[1].tel); 
 alert(userName.second[3].name + ' \n ' + userName.second[3].sex +' \n '+ userName.second[3].tel); 
 alert(userName.third[0].name + ' \n ' + userName.third[0].sex + ' \n '+ userName.third[0].tel);

说到 JSON，就不得不提一下 JSONP。JSONP (JSON with Padding) 是 JSON 的一种 "使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。可用于解决主流浏览器的跨域数据访问的问题。为什么我们从不同的域（网站）访问数据需要一个特殊的技术 (JSONP) 呢？这是因为同源策略。同源策略，它是由 Netscape 提出的一个著名的安全策略，现在所有支持 JavaScript 的浏览器都会使用这个策略。由于该策略，一般来说位于 server1 的 demo.com 的网页无法与不是 server1 的 demo.com 的网页的服务器沟通，而 HTML 的 3f1c4e4b6b16bbbd69b2ee476dc4f83a 元素是一个例外。利用 3f1c4e4b6b16bbbd69b2ee476dc4f83a 元素的这个开放策略，网页可以得到从其他来源动态产生的 JSON 资料，而这种使用模式就是所谓的 JSONP。用 JSONP 抓到的资料并不是 JSON，而是任意的 JavaScript，用 JavaScript 直译器执行而不是用 JSON 解析器解析。

 

3、JS 定时器

　　定时器可以在指定的时间间隔之后再执行代码，而不是在函数被调用后立即执行。定时器在网页中应用非常广泛，最常见的就是动态时钟，还有比如购物网站的倒计时抢购。定时器的类型可分为两类：一类是间隔型，即 setInterval，在执行时，从页面加载后每隔一段时间执行一次，可无限执行。另一类是延迟型，即 setTimeout，在页面加载后延迟指定的时间，去执行一次，而且仅仅只执行一次。该方法属于 window 对象的两个方法。

　　(1)、setInterval

　　setInterval(function, time)　　方法可间隔指定的毫秒数，不停的执行指定的代码。该方法有两个参数，第一个参数是函数，指定定时器要调用的函数或要执行的代码串，第二个参数是时间，用毫秒计，1000 毫秒是 1 秒，指定执行的间隔时间。

　　(2)、setTimeout

　　setTimeout(function, time)　　方法可延迟指定的毫秒数后，再执行一次指定的代码。该方法也有两个参数，第一个参数为函数，指定要调用的函数或代码串，第二个参数指定在执行代码前需要等待多少毫秒。

function show(){     alert(1); } //当页面加载后，每隔1秒弹出一个1，无限次执行
 setInterval(show,1000); 
 //当页面加载后，在1秒后弹出一个1，只执行一次
 setTimeout(show,1000);

　　setInterval 动态时钟效果：

//动态显示时钟
 <p id="demo"></p>
 <script> function clock(){     var d = new Date();   
     var time = d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds() ;     
     var oP = document.getElementById("demo").innerHTML = time; } setInterval(clock,1000); 
     </script>

　　setTimeout 统计效果：

//setTimeout可实现统计：
 <input type="text" id="demo" >
 <script> var num = 0; 
 function start() {     
 document.getElementById(&#39;demo&#39;).value = num;    
 num += 1;     
 setTimeout(start,1000); 
 } 
 setTimeout(start,1000); 
 </script>

可以开启定时器，也就可以关闭定时器。两种类型对应着两种方法。

　　(1)、clearInterval

　　clearInterval()　　方法可关闭由 setInterval() 方法执行的函数代码。使用该方法关闭定时器时，在创建间隔定时器时必须使用全局变量。

　　开始、停止动态时钟效果：

//开始、停止动态时钟
 <input type="text" id="txt1" >
 <input type="button" value="停止" onclick="stop()" >
 <input type="button" value="开始" onclick="start()" >
 <script> var time = null; function start(){     
 time = setInterval(function (){         
 var d = new Date();   
         var t = d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds();         
         var oTxT = document.getElementById("txt1").value = t;     
         },1000); }; 
         start(); 
         function stop(){     
         clearInterval(time); } </script>

(2)、clearTimeout

　　clearTimeout()　　方法用于停止执行由 setTimeout() 方法执行的函数代码。使用该方法时关闭定时器时，在创建延迟定时器时必须使用全局变量。

　　开始、停止统计效果：

//开始、停止统计：
 <input type="text" id="txt1" >
 <input type="button" value="停止" onclick="stop()" >
 <input type="button" value="开始" onclick="start()" >
 <script> var num = 0; 
 var time = null; function start(){     
 var oTxt = document.getElementById(&#39;txt1&#39;).value = num;     
 num += 1;     
 time = setTimeout(&#39;start()&#39;,1000); } start(); 
 function stop(){     
 clearTimeout(time); } 
 </script>

4、Event 对象

　　Event 对象代表事件的状态，用于获取事件的详细信息，如鼠标按钮、鼠标位置、键盘按键。事件通常与函数一起使用，函数不会在事件发生前被执行。

　　(1)、获取鼠标坐标

　　screenX 和 screenY 返回鼠标相对于屏幕的水平坐标和垂直坐标。参照点为屏幕的左上角。

　　clientX 和 clientY 返回鼠标相对于当前窗口可视区的水平坐标和垂直坐标。参照点为浏览器页面的左上角。

document.onclick = function (){     //可视区坐标
     alert(event.clientX + ',' + event.clientY);     //屏幕坐标
     alert(event.screenX + ',' + event.screenY); }

　(2)、获取鼠标钮按

　　button 事件属性用于获取鼠标哪个按钮被点击了。返回一个整数，0 代表左键，1 代表中键，2 代表右键。

 //鼠标左右按键
 document.onmousedown = function (){     alert(event.button); }

(3)、获取键盘按键

　　keyCode 事件属性用于获取按下了键盘的哪个键，返回键码，表示键盘上真实键的数字。

//键盘按键
 document.onkeydown=function (){     alert(event.keyCode); };

　键盘按键的 ctrlKey、shiftKey 和 altKey 快捷属性，可判断是否按下了该键，返回一个布尔值，指示在事件发生时，改键是否被按下。1 表示被按下，0 表示没有按下。

 document.onkeydown = function (){     
 if(event.ctrlKey == 1){         
 alert('Ctrl键被按了');     
 }     
 else if(event.shiftKey == 1){         
 alert('Shift键被按了');     
 }    
  else if(event.altKey == true){         
  alert('Alt键被按了');     
  }     
  else{         
  alert('都没被按下');    
   }
    };

　　　　实例：按键提交消息

<!DOCTYPE html>
 <html>
 <head>
     <meta charset="utf-8" />
     <title>JavaScript示例</title>
 <script>
 window.onload=function (){     
 var oTxt1 = document.getElementById(&#39;txt1&#39;);     
 var oTxt2 = document.getElementById(&#39;txt2&#39;);     
 var oBtn = document.getElementById(&#39;btn1&#39;); 
     //点击按钮提交
     oBtn.onclick = function (){         //输入框的值等于文本框的值。
         oTxt2.value += oTxt1.value + &#39;\n&#39;;         //清空输入框的值，以便再次输入
         oTxt1.value = &#39;&#39;;     }; 
 
     //按Enter或Ctrl+Enter提交
     oTxt1.onkeydown = function (){         //回车键的键码为13
         if(event.keyCode == 13 || event.keyCode == 13 && event.ctrlKey){             
         oTxt2.value += oTxt1.value + &#39;\n&#39;;             
         oTxt1.value = &#39;&#39;;         
         }     
         }; } 
         </script>
 </head>
 <body>
 <input id="txt1" type="text" >
 <input id="btn1" type="button" value="提交"><br>
 <textarea id="txt2" rows="10" cols="50" ></textarea>
 </body>
 </html>

(4)、事件流

　　事件的传递有两种方式：冒泡与捕获。事件传递定义了元素触发事件的顺序。

　　事件冒泡：当一个元素发生事件后，事件会顺着层级（父级 - 父级的父级 --）关系依次向上传递直到 document。

　　事件捕获：事件捕获与事件冒泡正好相反，外部元素的事件会先被触发，然后才会触发内部元素的事件，即从祖先到后代。

　　事件流同时支持两种事件方式，冒泡型事件和捕获型事件，但是捕获型事件先发生。

　　两种事件流会触发 DOM 中的所有对象，从 document 对象开始，也在 document 对象结束。

　　语法：addEventListener('事件名称'，函数，冒泡/捕获)

　　addEventListener()　　方法用于向指定元素添加事件，该方法不会覆盖已存在的事件，可同时向一个元素添加多个事件。该方法有三个参数，第一个参数定义事件的类型，

　　第二个参数规定事件触发后调用的函数，第三个参数是布尔值，用于定义该事件是冒泡还是捕获，若为 false，则表示冒泡事件，若是 ture，则表示捕获事件。

　　这里需要注意是的该方法的事件类型，不需要加”on“，比如平时写点击事件：“onclick”，该方法中则使用“click”即可。

<!DOCTYPE html>
 <html id="htm">
 <head>
     <meta charset="utf-8" />
     <title>JavaScript示例</title>
 <style> div{padding:50px;} </style>
 <script>
 window.onload = function (){     
 var x = document.getElementById("div1");     
 var y = document.getElementById("div2");     
 var z = document.getElementById("div3"); 
     var o = document.getElementById("bod");     
     var n = document.getElementById("htm"); 
     x.addEventListener("click", function() {         alert("1冒泡");     }, false); 
     y.addEventListener("click", function() {         alert("2冒泡");     }, false); 
     z.addEventListener("click", function() {         alert("3冒泡");     }, false); 
     o.addEventListener("click", function() {         alert("body捕获");     }, true); 
     n.addEventListener("click", function() {         alert("html冒泡");     }, false); }; </script>
 </head>
 <body id="bod">
 <div style="background:lightgreen;margin-bottom:10px;">我是body元素，我捕获。祖先html也会冒泡。</div>
 <div id="div3" style="background:#ccc;">我是div3，我冒泡     
 <div id="div2" style="background:green;">我是div2,我冒泡         
 <div id="div1" style="background:red;">我是div1,我冒泡</div>
     </div>
 </div>
 </body>
 </html>

　　removeEventListener()　　方法用于移除由 addEventListener() 方法添加的事件监听。这里需要注意在绑定函数时不能使用匿名函数，否则无法删除。

<!DOCTYPE html>
 <html>
 <head>
     <meta charset="UTF-8">
     <title>JavaScript示例</title>
 <style>
  #div1{     
 background:green;     
 padding:50px;     
 color:white; } 
 </style>
 </head>
 <body>
 <div id="div1"> div元素添加了onmousemove事件监听，鼠标在绿色区域内移动时会显示随机数。 
 <p>点击按钮可移除div的事件监听。</p>
     <button id="btn1">点击移除</button>
 </div>
 <p id="p1"></p>
 
 <script> 
 var oDiv = document.getElementById("div1"); 
 var oP = document.getElementById("p1"); 
 var oBtn = document.getElementById("btn1"); 
 oDiv.addEventListener("mousemove", block, false); 
 function block(){     
 oP.innerHTML = Math.random()*10; 
 } oBtn.onclick = function (){    
  oDiv.removeEventListener("mousemove", block, false); 
  }; 
  </script>
 </body>
 </html>

cancelBubble　　方法可取消事件冒泡，不会往父级传递。实例：仿百度翻译效果，点击显示按钮显示 div，随便点击页面其他位置隐藏 div。

　　如果不取消事件冒泡，则在点击按钮的同时 div 先是显示了，然后又立马被隐藏了，可以注释掉取消事件冒泡代码，用弹窗查看效果。

<!DOCTYPE html>
 <html>
 <head>
     <meta charset="UTF-8">
     <title>JavaScript示例</title>
 <style> 
 #div1{     
 width:500px;     
 height:300px;     
 background:lightgreen;     
 display:none; 
 } 
 </style>
 <script>
 window.onload = function (){     
 var oBtn = document.getElementById("btn1");     
 var oDiv = document.getElementById("div1"); 
     //点击按钮显示div
     oBtn.onclick = function (){         
     oDiv.style.display = &#39;block&#39;;         //alert(&#39;显示&#39;);
     
         //取消事件冒泡，不会往父级传递。
         event.cancelBubble = true;     }; 
     //点击document隐藏div
     document.onclick = function (){         
     oDiv.style.display = &#39;none&#39;;    
      }; }; 
      </script>
 </head>
 <body>
 <input id="btn1" type="button" value="显示">
 <div id="div1"></div>
 </body>
 </html>

　(5)、默认事件

　　所谓的默认事件，就是浏览器自带的事件。比如按下键盘按键，浏览器会自动将按键值写入输入框。再比如新建一个空白页面在浏览器打开，点击右键出现菜单项。我们并没有用 JS 写相关判断，如果点击右键触发什么事件。这就是浏览器的默认事件，也叫默认行为。如果我们想弹出自定义的右键菜单项，这时候就需要阻止掉浏览器的默认行为，阻止默认事件最简单的写法就是 return false; 。

　　实例：只能输入数字键的输入框，不考虑小键盘区。

　　实现思路：键盘区数字键 0 的键码是 48，1 是 49，9 是 57，那么就可以做出判断，如果按键小于 48 或大于 57，则阻止掉，这说明按下的不是数字键，考虑到写错了需要删除，或者少写了，需要光标移动到少写的位置补上，再移回继续输入，那么就再加上判断条件，如果按键不是退格键或者不是左右方向键，则阻止掉。删除键(退格键)的键码是 8，左方向键是 37，右方向键为 39。

<!DOCTYPE html>
 <html>
 <head>
     <meta charset="UTF-8">
     <title>JavaScript示例</title>
 <script>
 window.onload = function (){    
  var oTxt = document.getElementById(&#39;txt1&#39;);     
 oTxt.onkeydown = function (){ 
         //如果按下的不是删除键8，并且不是左方向键37，并且不是右方向键39，并且按键键码小于48或大于57，则阻止掉
         if(event.keyCode !=8 && event.keyCode != 37 && event.keyCode != 39 && event.keyCode < 48 || event.keyCode > 57){             
         return false;         
         }     
         }; }; 
         </script>
 </head>
 <body>
 <input id="txt1" type="text" placeholder="请输入数字">
 </body>
 </html>

5、JS 知识点

　　(1)、JS 引擎的预解析机制

　　JS 引擎的解析过程可分为两个阶段：预解析阶段和执行阶段。

　　JS 预解析是在程序进入一个新环境时，把该环境中的变量和函数预解析到他们能调用的环境中，即每一次的预解析单位是一个执行环境。当文档流中有多个 JS 代码段，每个代码段用 script 标签分隔，包括外部引入的 JS 文件，JS 引擎并非是逐行的解析程序，而是分段进行的，即一个执行环境。预解析不能跨代码段执行，简单说就是不能在一个代码段声明，在另一个代码段调用。

　　变量和函数的预解析就是提升，所谓提升（hoisting），就是 JS 引擎在执行时，默认将所有的变量声明和函数声明都提升到当前作用域的最前边去的行为。所以函数可以在声明之前调用。需要注意的是在使用表达式定义函数时无法提升

<script>
 alert(a(2));    //返回：4
 function a(x){     return x * x; } 
 alert(b);    //返回：undefined
 var b = &#39;hello&#39;; 
 
 alert(c(2));    //报错
 //实际上是以变量声明提升
 //相当于：c(); var c = undefined; c = function (){}
 var c = function (y){     return y * y; } 
 function d(){     var n = &#39;hello&#39;; } alert(n);    //报错
 </script>

通过上面的代码可以看出，function 定义的函数声明 (a) 在代码开始执行之前(预解析阶段)对其实现了函数声明提升，先将其放入内存中，所以在函数声明之前可以调用该函数。和函数声明一样，变量声明 (b) 也会在一开始被放入内存中，但是并没有赋值，所以在他赋值之前，他的值就是 undefined。但是函数表达式 (c) 不同，函数表达式用 var 声明，也就是说解析器会对其变量提升，并对其赋值为 undefined，然后在执行期间，等到执行到该 var 变量的时候再将其变量指向一个 function 函数，所以在函数表达式之前执行该函数就会报错。函数 (d) 是在函数内声明的变量，那么这个变量是属于该函数的私有变量，所以在外部调用时会报错。

　　下面实例实例说明了每一次 JS 预解析的单位是一个执行环境，不会跨一个代码段去执行，直接会报错。

<script>
     alert(a);//报错：a is not defined
 </script>
 
 <script>     var a = &#39;hello&#39;; </script>

若定义了两个同名的函数 (b)，则在预解析时后面的一个会覆盖掉前边的一个。若变量 (a) 和函数重名 (a)，则函数的优先级高于变量的优先级。

<script>
 alert(a); //返回：function a(){alert(&#39;hi&#39;);} 
 var a = &#39;hello&#39;; 
 
 function a(){     alert(&#39;hi&#39;); } alert(a); //返回：hello
 
 b();    //返回：2
 function b(){     alert(1); } b();    //返回：2
 function b(){     alert(2); } </script>

　(2)、回调函数

　　简单理解，所谓回调，就是回头调用，那么回调函数就是一个函数调用的过程。比如函数 a 有一个参数，这个参数是一个函数 b，当函数 a 执行完以后再执行函数 b，那么这就是一个回调的过程。用官方术语解释就是：回调是一个函数作为参数传递给另一个函数，其母函数完成后执行。那么函数 a 就是母函数。这里需要注意：函数 b 是以参数的形式传递给函数 a 的，那么这个函数 b 就被称为回调函数。回调函数不是由母函数直接调用的，而是在特定的事件或者条件发生时由另外的一方调用，用于对该事件进行响应。回调函数必须使用关键字 callback，并且回调函数本身必须是全局函数。

　　JS 回调的原理是一个异步的流程，在异步调用的情况下使用性能很好，举个简单的例子更能具体的说明，比如朋友要来找你，等到门口了给你打电话。"来找你" 就是函数 a 开始执行，而这时候"你"可以去做任何事情，"到门口"就是函数 a 执行完毕，"给你打电话"这就属于回调函数 b，然后你们就可以一起愉快的玩耍了。

　　下面是一个简单的回调函数实例，点击按钮，当函数 a 执行完成后，分别调用回调函数 b、c、d。

<!DOCTYPE html>
 <html>
 <head>
     <meta charset="UTF-8">
     <title>JavaScript示例</title>
 <script> function a(callback){     
 alert("我是母函数a");     
 alert("现在要开始调用回调函数");     
 callback(); } 
 function b(){     
 alert("我是回调函数b"); } 
 function c(){     
 alert("我是回调函数c"); } 
 function d(){     
 alert("我是回调函数d"); } 
 function back(){     
 a(b);     
 a(c);     
 a(d); } 
 </script>
 </head>
 <body>
 <button onclick="back()">点击按钮</button>
 </body>
 </html>

　(3)、自调用函数

　　自调用函数也叫立即执行函数。使用关键字 function 定义一个函数，在给这个函数指定一个函数名，这叫函数声明。使用关键字 function 定义一个函数，未给函数命名，在将这个匿名函数赋值个一个变量，这叫做函数表达式，这也是最常见的函数表达式语法。匿名函数就是使用关键字 function 定义一个函数，但是不给函数命名，匿名函数属于函数表达式。匿名函数有很多作用，可赋予变量创建函数，赋予一个事件则称为事件处理程序。

　　函数声明和函数表达式的区别：JS 引擎在解析 JS 代码时当前执行环境中的函数声明会提升，而函数表达式只能等到 JS 引擎执行到他所在的作用域时，才会逐行的解析函数表达式。函数声明不能使用自调用，而函数表达式可以使用自调用。

　　函数的自调用就是在函数体后加括号，再用括号整个包起来。这样说明该函数是一个函数表达式。

(function (a, b) {     alert(a * b); }(2, 3));    //返回：6

(4)、构造函数

　　函数通过关键字 function 定义，也可以使用关键字 new 定义。函数即对象，对象具有属性和方法，构造函数就是将定义的函数作为某个对象的属性，函数定义作为对象的属性，则称之为对象方法。函数如果用于创建新的对象，就叫做对象的构造函数。

　　(5)、闭包

　　简单理解就是：子函数可以使用父函数中的局部变量。之前好几个例子中都用到了闭包，就是 window.onload 函数下定义的点击事件函数。

　　JS 的变量可以是全局变量或局部变量，在函数之外声明的变量就是全局变量，函数之内声明的变量就是局部变量，私有变量可以用到闭包。函数可以访问全局的变量，也可以访问局部的变量。作用域就是变量和函数的可访问范围，即作用域控制着变量和函数的可见性与生命周期，忽略块级作用域，作用域可分为全局作用域和局部作用域。全局变量是全局对象的属性，局部变量是调用对象的属性。全局变量属于 window 对象，全局变量在任何地方都可以访问，局部变量只能用于定义他的函数内部，这就是 JS 的作用域链，即内层函数可以访问外层函数的局部变量，外层函数不能访问内层函数的局部变量。全局变量和局部变量即便名称相同，他们也是两个不同的变量。修改其中一个，不会修改另一个的值。这里需要注意：在函数内声明的量，如果不使用关键字 var ，那么他就是一个全局变量。

　　所有函数都能访问全局变量，也就是所有的函数都可以访问他上一层的作用域。JS 支持函数嵌套，嵌套函数可以访问上一层的函数变量。闭包就是可以访问上一层函数作用域中的变量函数，即便上一层函数已经关闭。

　　闭包实例解析：

　　如果想实现点击按钮计数，可以声明一个变量，并赋初始值为 0，函数设置值加 1。但是这个全局变量在任何地方都可以使用，即便没有调用这个函数，计数也会改变。

<body>
 <input type="button" value="全局变量计数" onclick="show()">
 <input type="button" value="调用一次变量" onclick="change()">
 <p id="p1">0</p>
 <script> var num = 0; 
 function count() {     
 return num += 1; } 
 var oP = document.getElementById("p1"); 
 function show(){     
 oP.innerHTML = count(); } 
 function change(){     
 alert(num = 10); } 
 </script>
 </body>

点击按钮可以看到事与愿违，虽然这样不能在函数外部使用变量，也就不能修改计数，但是每次点击按钮值都为 1。因为变量是在函数内声明的，只有该函数可以使用，每点击按钮一次，调用一次该函数，每次调用变量的初始值都为 0，再加 1 就是 1。那么使用 JS 的嵌套函数可以完成这一问题，内嵌函数可以访问父函数的变量。

<body>
 <input type="button" value="计数" onclick="show()">
 <p id="p1">0</p>
 <script> function count(){     
 var num = 0;     
 function add(){        
  num += 1;     }     
  add();     
  return num; } add();    //报错：未定义
 function show(){     document.getElementById("p1").innerHTML = count(); } </script>
 </body>

虽然这样可以解决变量的问题，但是如果可以在外部调用 add() 函数的话，那么点击按钮计数就完美了，梦想总是美好的，现实却是残酷的，内嵌函数不能在外部被调用。这时候我们的闭包就来了，我们需要闭包，有了闭包这个问题就真的完美了。

 <body>
 <input type="button" value="计数" onclick="show()">
 <p id="p1">0</p>
 <script> var count = (function (){     
 var num = 0;     
 return function (){        
  return num += 1;     }; }()); 
 var oP = document.getElementById(&#39;p1&#39;); 
 function show(){     
 oP.innerHTML = count(); } </script>
 </body>

变量 count 指定了函数自我调用返回值，自我调用函数只执行一次，计数初始值为 0，并返回函数表达式，计数受匿名函数作用域的保护，只能通过 count() 方法修改。

　　变量 count 可以作为一个函数使用，他可以访问函数上一层作用域的计数，这就叫做 JS 闭包，函数拥有自己的私有变量。

以上就是 JavaScript学习总结【4】JS深入的内容，更多相关内容请关注PHP中文网（www.php.cn）！