js 事件冒泡 事件代理 事件捕捉 this指標 bind this

物件this、currentTarget和target 

在事件處理程式內部，物件this始終等於currentTarget的值，而target則只包含事件的實際目標。如果直接將事件處理程式指定給了目標元素，則this、currentTarget和target包含相同的值。來看下面的例子：

var btn = document.getElementById("myBtn");
 btn.onclick = function (event) {
     alert(event.currentTarget === this); //ture
     alert(event.target === this); //ture
 };

這個例子檢測了currentTarget和target與this的值。由於click事件的目標是按鈕，一次這三個值是相等的。如果事件處理程式存在於按鈕的父節點中，那麼這些值是不相同的。再看下面的例子：

 document.body.onclick = function (event) {
     alert(event.currentTarget === document.body); //ture
     alert(this === document.body); //ture
    alert(event.target === document.getElementById("myBtn")); //ture
 };

當單擊這個例子中的按鈕時，this和currentTarget都等於document.body，因為事件處理程式是註冊到這個元素的。然而，target元素卻等於按鈕元素，以為它是click事件真正的目標。由於按鈕上並沒有註冊事件處理程式，結果click事件就冒泡到了document.body，在那裡事件才得到了處理。

在需要通過一個函式處理多個事件時，可以使用type屬性。例如：

  var btn = document.getElementById("myBtn");
  var handler = function (event) {
          switch (event.type) {
          case "click":
              alert("Clicked");
              break;
          case "mouseover":
              event.target.style.backgroundColor = "red";
              bread;
        case "mouseout":
             event.target.style.backgroundColor = "";
             break;
        }
     };
 btn.onclick = handler;
 btn.onmouseover = handler;
 btn.onmouseout = handler;

   //設立一個簡單地物件作為“上下文”
 var context = { foo: "bar" };
  
 //一個在this上下文中指向foo變數的函式
 function returnFoo () {
   return this.foo;
 }
  
 // 變數在作用域中不存在，因此顯示undefined
 returnFoo(); // => undefined
  
 // 如果我們把它繫結在context上下文中
 var bound = returnFoo.bind(context);
  
 // 現在的作用域中有這個變數了
 bound(); // => "bar"
  
 //
 // 這就是Function.prototype.bind的作用.    
 //由於returnFoo也是函式，因此它繼承了function的原型
 //
 // 如果你覺得享受，接著往下讀，下面更精彩
 //
  
 // 有許多方法將函式繫結在一個上下文中
 // Call和Apply讓你能在上下文中呼叫函式
 returnFoo.call(context); // => bar
 returnFoo.apply(context); // => bar
  
 // 將函式新增到物件中
 context.returnFoo = returnFoo;
 context.returnFoo(); // => bar
  
 //
 // 現在我們來玩一點詭異的東西
 //
  
 // Array.prototype 中有一個叫做slice的方法
 // 對一個陣列呼叫slice，可以返回一個從start index到end index的陣列
 [1,2,3].slice(0,1); // => [1]
  
 // 因此我們把Array.slice賦值給一個本地變數slice
 var slice = Array.prototype.slice;
  
 //現在的slice是"自由的"，由於Array.prototype中的slice一般指定了上下文
 //或者預設為this,此時slice將不起作用
 slice(0, 1); // => TypeError: can't convert undefined to object
 slice([1,2,3], 0, 1); // => TypeError: ...
  
 // 但是如果我們使用call或者apply，slice又將在一個上下文中執行
 slice.call([1,2,3], 0, 1); // => [1]
  
 // Apply和Call差不多，知識引數要放在一個陣列中
 slice.apply([1,2,3], [0,1]); // => [1]
  
 // 使用call沒錯了，那麼能不呢使用bind呢？
 // 沒錯，我們來把"call"繫結在slice上
 slice = Function.prototype.call.bind(Array.prototype.slice);
  
 // 現在slice可以把第一個引數作為上下文了
 slice([1,2,3], 0, 1); // => [1]
  
 //
 // 很酷，對吧。現在再來完成一件事
 //
  
 // 現在我們對bind本身做一件剛才對silce做的事
 var bind = Function.prototype.call.bind(Function.prototype.bind);
  
 // 在這裡總結一下，好好想想
 // 發生了什麼事? 我們改變了call，
 // 返回一個接收一個函式和一個上下文作為ic桉樹的函式
 //並且返回了一個完全繫結的函式
  
 // 回到最初的例子
 var context = { foo: "bar" };
 function returnFoo () {
   return this.foo;
 }
  
 // 現在來使用神奇的"bind"函式
 var amazing = bind(returnFoo, context);
 amazing(); // => bar
    最後第三部分的程式碼來自一段譯文:https://variadic.me/posts/2013-10-22-bind-call-and-apply-in-JavaScript.html,程式碼很好所以忍不住拿來用,十分感謝.
    補充一段程式碼,關於Ajax的回撥中,如何保持this:

 $.ajax({
       url: url,
       type: 'post',
       dataType: 'json',
       data: {'info': info}
     })
     .done((function(data) {
       if(data.status){
         // 這裡this指向的是外層bind進來的this
         this._data.process_type = info.process_type;
       }else{
         uUnique.noticeBox.showWarning(data.message);
       }
     }).bind(this));