同步、异步编程（上）--同步异步概念以及回调函数、事件监听

（1）同步和异步的概念
同步：在进程中任务未结束时，需要等待结束后才能执行下一个任务。
异步：在进程中任务未结束，在等待的过程中可以先去执行下一个任务。
由于JavaScript属于单线程，所以我们最好采用异步编程。
（2）异步编程的实现方式
a.回调函数
b.事件监听
c.发布/订阅
e.promise对象
f.Gennerator函数
g.async函数

（3）回调函数
1.回调函数的概念：
回调函数也被称为高阶函数，是一个被作为参数传递给另一个函数（这里我们把另一个
函数称为“otherFuncion”）的函数，回调函数在otherFunction中被调用。
我们常见的回调函数，例如在Jquery中
$("#btn_1").click(function(){
alert("btn_1 clicked");
});

在这个例子中我们将一个匿名函数作为参数传递给了click方法,click方法会调用我们传递
给它的函数。

再看一个例子
var friends = ["Mike", "Stacy", "Andy", "Rick"];
 
friends.forEach(function (eachName, index){
console.log(index + 1 + ". " + eachName); // 1. Mike, 2. Stacy, 3. Andy, 4. Rick
});

这个例子中也传递了一个匿名函数作为参数给forEach方法。

实际上我们也可以传递一个函数名给另一个函数作为参数。

2.回调函数怎样运作
当我们将一个回调函数作为参数传递给另一个函数时，我们仅仅传递了
函数的定义，并没有在参数中执行函数（我们并没有在传递函数时像平时执行函数一样带有
一对执行小括号）。需要注意的很重要的一点，回调函数并不会马上执行，它会在包含他的
函数内在某个特定的时间点被“回调”。

3.回调函数其实是闭包
4.实现回调函数的基本原理
a.使用命名或匿名函数作为回调
b.传递参数给回调函数
我们能够将包含（调用）它的函数的属性（或全局属性）作为回调函数的参数
--这也说明了回调函数其实是闭包。
c.在执行前确保回调函数时一个函数
如下：
//确保callback是一个函数   
    if(typeof callback === "function"){
        //调用它，既然我们已经确定了它是可调用的
          callback(options);

d.使用this对象的方法作为回调函数时的问题（*）
当回调函数是一个this对象的方法时，我们必须改变执行回调函数的方法来
保证this对象的上下文。否则如果回调函数被传递给一个全局函数，
this对象要么指向全局window对象（在浏览器中）
。要么指向包含方法的对象。 
 例子：
//定义一个拥有一些属性和一个方法的对象 //我们接着将会把方法作为回调函数传递给另一个函数
 
var clientData = {
    id: 094545,
    fullName "Not Set",
    //setUsrName是一个在clientData对象中的方法
    setUserName: fucntion (firstName, lastName){
        //这指向了对象中的fullName属性
        this.fullName = firstName + " " + lastName;
    }
}
 
function getUserInput(firstName, lastName, callback){
    //在这做些什么来确认firstName/lastName
 
    //现在存储names
    callback(firstName, lastName);
}

getUserInput("Barack","Obama",clientData.setUserName);
 
console.log(clientData.fullName);  //Not Set
 
//fullName属性将在window对象中被初始化    
console.log(window.fullName);  //Barack Obama

在上面的例子中，我们看到 ，当clientData.setUsername被执行时，
this.fullName并没有设置clientData对象中的fullName属性。相反，
它将设置window对象中的fullName属性，因为getUserInput是一个全局函数。
这是因为全局函数中的this对象指向window对象。
如何解决呢？我们可以通过call和apply函数来保存this。
我们知道JavaScript中的函数都有两个方法:Call和Apply，这两个方法被用来
设置函数内部的this对象，以及给函数传递变量。
call接收的第一个参数为被用来在函数内部当做this的对象，传递给函数的参数被挨个传递（当然使用逗号分开）。Apply函数的第一个参数也是在函数内部作为this的对象，
然而最后一个参数确是传递给函数的值的数组。  
如何修改上一例子中的问题呢
//注意到我们增加了新的参数作为回调对象，叫做“callbackObj”
function getUserInput(firstName, lastName, callback. callbackObj){
        //在这里做些什么来确认名字
 
        callback.apply(callbackObj, [firstName, lastName]);
}
//我们将clientData.setUserName方法和clientData对象作为参数，clientData对象会被Apply方法使用来设置this对象    
getUserName("Barack", "Obama", clientData.setUserName, clientData);
 
//clientData中的fullName属性被正确的设置
console.log(clientUser.fullName); //Barack Obama

上面的例子使用了Call函数，也可以使用Apply函数

e.允许多重回调函数
我们可以将不止一个的回调函数作为参数传递给一个函数，就像我们能够传递不止一个变量一样。这里有一个关于jQuery中AJAX的例子：
function successCallback(){
    //在发送之前做点什么
}    
 
function successCallback(){
  //在信息被成功接收之后做点什么
}
 
function completeCallback(){
  //在完成之后做点什么
}
 
function errorCallback(){
    //当错误发生时做点什么
}
 
$.ajax({
    url:"http://fiddle.jshell.net/favicon.png",
    success:successCallback,
    complete:completeCallback,
    error:errorCallback
 
});

5."回调地狱"问题以及解决方案
在异步执行代码时，多层级的回调函数堆积会导致代码杂乱无章难以维护，我们称为“回调地狱”
两种解决方案：
a.给函数命名，并传递它们的名字作为回调函数，而不是在主函数的参数中定义匿名函数。
b.模块化，将代码分割到模块中，不同的代码块完成不同的工作，然后到巨型应用中导入模块。

（4）事件监听
1.事件的概念
JavaScript使我们有能力创建动态页面，网页中的每一个元素都可以产生某些触发JavaScript函数的事件。
我们可以认为事件是可以被JavaScript侦测到的一种行为。
2.事件流
事件流主要分为冒泡型事件和捕获型事件。IE浏览器目前只支持冒泡型事件，
而支持标准DOM的浏览器比如火狐、Chrome等两者都支持。
冒泡型事件流：事件的传播是从最特定的事件目标到最不特定的事件目标。即从DOM树的叶子到根。【推荐】
捕获型事件流：事件的传播是从最不特定的事件目标到最特定的事件目标。即从DOM树的根到叶子。

DOM标准采用捕获+冒泡。两种事件流都会触发DOM的所有对象，从document对象开始，也在document对象结束。

3.事件处理
a.HTML事件处理
<button οnclick="something()"></button>
b.DOM 0级事件处理
var dib1 = document.getElementById("div1");
div1.onclick = function(){
    alert("message1");
};
div1.onclick = function(){
    alert("message2");
}
缺点:每个DOM元素只能绑定一个同类事件，例如上面只弹出message2
c.DOM 2级事件处理（事件监听）
var dib1 = document.getElementById("div1");
    
div1.addEventListener('click', function(){
        
alert("message1");
    
},false);
    
div1.addEventListener('click', function(){

alert("message2");
    
},false);
addEventListener("事件名" , "事件处理函数" , "布尔值");

false 事件冒泡           true   事件捕获    

优点相比前两个就多了。可以选择是事件流。
可绑定多个同类事件。事件名可以组成字符串。

addEventListener("事件名" , "事件处理函数" , "布尔值")和removeEventListener("事件名" , "事件处理函数" , "布尔值")
注意：removeEventListener()不能移除匿名函数。

event.preventDefault():阻止默认事件
 event.stopPropagation();阻止事件冒泡
事件代理
事件代理的原理：
传统的事件处理中，需要为每个元素添加事件处理器。js事件代理则是一种简单有效的技巧，通过它可以把事件处理器添加到一个父级元素上，从而避免把事件处理器添加到多个子级元素上。

事件代理的原理用到的就是事件冒泡和目标元素，把事件处理器添加到父元素，等待子元素事件冒泡，并且父元素能够通过target（IE为srcElement）判断是哪个子元素，从而做相应处理

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>Document</title>
</head>
<body>
	<ul id="color-list">
		<li>red</li>
		<li>orange</li>
		<li>yellow</li>
		<li>green</li>
		<li>blue</li>
		<li>indigo</li>
		<li>purple</li>
	</ul>
	<script>
	(function(){
	    var colorList=document.getElementById("color-list");
	    colorList.addEventListener('click',showColor,false);
	    function showColor (e) {
	        e=e||window.event;
	        var targetElement=e.target||e.srcElement;
	        if(targetElement.nodeName.toLowerCase()==="li"){
	        alert(targetElement.innerHTML);
	        }
	    }
	})();
	</script>
 
</body>
</html>