6.用on繫結事件

js程式碼初步模架已經出來了，接下就要開始寫具體的功能。功能又從哪裡開始寫呢？也許哪裡開始都可以。 最終我們發現，介面上只有兩個按鈕，要麼加，要麼減，那麼我們就加和減開始。

點選加號，點選減號，我們得讓他先觸發事件；init是初始化的，那麼在初始化的時候，我希望他同時也繫結事件。

//初始化
Quantity.prototype.init = function (opt) {
    opt = opt || {};
    this.addBtn = opt.addBtn;
    this.cutBtn = opt.cutBtn;
    this.numBox = opt.numBox;
    this.msgBox = opt.msgBox;

    this.evt();
};

//負責繫結事件
Quantity.prototype.evt = function (opt) {

};

由於考慮到繫結事件，可能比較複雜，我將他獨立出一個函式。 那麼就接下去寫吧。

//負責繫結事件
Quantity.prototype.evt = function() {
    console.log(this.addBtn); //".num-add" 
    this.addBtn.on('click', function() { //undefined is not a function
        console.log('加');
    });

    this.cutBtn.on('click', function() {
        console.log('減');
    });
};

發現又報錯了，因為this.addBtn和this.cutBtn只是一個字串，並沒有on這個方法。要有on方法，一定是要將事件繫結在$()之後返回的物件上的，那麼接著改一下程式碼。

//負責繫結事件
Quantity.prototype.evt = function() {
    $(document).on('click', this.addBtn, function() {
        console.log('加');
    });

    $(document).on('click', this.cutBtn, function() {
        console.log('減');
    });
};

經過小改動之後已經實現了我想要的結果。在這裡我想分享一下on的一些用法。

1.click()可以on('click')也可以

html程式碼：

<button class="test1">點我1</button>
<button class="test2">點我2</button>

js程式碼：

$('.test1').click(function(){
    alert(1);
});

$('.test2').on('click', function(){
    alert(2);
});

這個例子很簡單，只是作為一個鋪墊。
檢視例子：http://jsfiddle.net/gs_jquery/d3L51gpu/1/

2.on可以動態繫結事件。

當然實際專案中，我們會先繫結事件，因為dom元素是需要根據業務邏輯再追回進去的。

html程式碼：

<div id="wrap"></div>

js程式碼：

//先繫結事件
$('#test1').click(function () {
    alert(1);
});
$('#test2').on('click', function () {
    alert(2);
});
$('#wrap').on('click', '#test3', function () {
    alert(3);
});

//再追加dom
var wrapObj = $('#wrap');
wrapObj.append('<button id="test1">點我1- click</button>');
wrapObj.append('<button id="test2">點我2 - on("click")</button>');
wrapObj.append('<button id="test3">點我3 - on("click")</button>');

看到這個例子，我們發現只有 id="test3"個按鈕會彈出一個資訊。是的，不管是click還是用on方法，繫結的物件一定是要在js執行之前已經存的。所以當繫結在#wrap上的時候就可以了。
檢視例子：http://jsfiddle.net/gs_jquery/L7ma7af9/

3.on和off配合著用

html程式碼：

<button id="test1">點我</button>
<button id="test2">繫結</button>
<button id="test3">取消</button>

js程式碼：

//點選繫結, test1就繫結事件了
$('#test2').click(function() {
    $('#test1').on('click', function() {
        alert(1);
    });
});

//點選繫結, test1就取消事件了
$('#test3').on('click', function() {
    $('#test1').off('click');
});

例子：http://jsfiddle.net/gs_jquery/1es6n2aq/ 沒事就開啟例子點點，我們發現每on一次就繫結一次，而off一次，就把之前所有繫結的事件都解綁了。專案裡面也會常碰到重複繫結而產生的bug。

4.on和off配合名稱空間使用

html程式碼：

<button id="test1">點我</button>
<button id="bind1">繫結1</button>
<button id="bind2">繫結2</button>
<button id="off">解綁</button>

js程式碼：

$('#bind1').click(function () {
    $('#test1').on('click.space1', function () {
        alert(1);
    });
});


$('#bind2').on('click', function () {
    $('#test1').on('click.space2', function () {
        alert(2);
    });
});

$('#off').on('click', function () {
    $('#test1').off('click.space1');
});

例子：http://jsfiddle.net/gs_jquery/yqtzv0pu/
加上了名稱空間之後，我們在解綁的時候可以對應的解綁，而不會所有的事件都解綁了。

瞭解這些基本的用法，應該可以搞定很多情況了，下面兩種用的比較少，順便也推薦一下。

5.自定義事件。

html程式碼:

<button id="click1">點我1</button>
<button id="click2">點我2</button>

js程式碼：

$(this).on('xidada', function () {
    alert('xidada');
});

$(this).on('pmm', function () {
    alert('pmm');
});

$('#click1').click(function () {
    $(this).trigger("xidada");
});

$('#click2').click(function () {
    $(this).trigger("pmm");
});

自定義事件有沒有很酷的感覺，為了保證版權，是不是想把自己的名字作為了一個事件名呢？ 看例子：http://jsfiddle.net/gs_jquery/7jwco6qo/

6.資料傳遞

html程式碼：

<button id="click1">點我1</button>
<button id="click2">點我2</button>
<button id="click3">點我3</button>

js程式碼：

function func(name) {
    alert(name);
}

function fund(e) {
    //e.data 就是事件上傳過來的資料。
    alert(e.data.name);
}

$('#click1').on('click', function() {
    func('name');
});

//｛｝這個物件是用來傳值的。傳在e.data上面
$('#click2').on('click', {
    name: 'name'
}, fund);

第一種方法是大家用的最多的，而第二種方法是將引數傳在事件(e)上面，多一種方法多一個辦法，先學著也許可以用到呢？ 例子：http://jsfiddle.net/gs_jquery/vcwhvggn/

我們可以將他轉成jquery物件再綁事件。

//負責繫結事件
Quantity.prototype.evt = function() {

    $(this.addBtn).on('click', function() {
        console.log('加');
    });

    $(this.cutBtn).on('click', function() {
        console.log('減');
    });
};