事件處理 (jQuery 13)

事件就是做了特定的事以後，會自動觸發的程式

除了複製程式碼外，比較不會錯的寫法：
1.$('xxx').xxxEventName();
2.在()裡面寫「function(){}」
3.在{}裡面按enter

官網連結
目前有12個：

以下4組都是挷定事件和解除事件，因版本的差異才會看起來這麼多
.live()：1.7過時，1.9移除，舊版要使用delegate()來代替
.die()：1.7過時，1.9移除，舊版要使用undelegate()來代替

.bind()：效能比.on()慢
.unbind()：效能比.off()慢

.delegate()：1.7版被on()取代，可是並沒有寫過時和移除，但我試的結果是無效的，我用1.10.2測的
.undelegate()：1.7版被off()取代，可是並沒有寫過時和移除，但我試的結果是無效的，我用1.10.2測的

.on()：很像bind，但多個selector參數
.off()：很像unbind，但多個selector參數


.one()：和上面一樣，但只執行一次，所以也不會有解除事件的方法
.trigger()：自定義的事件，會抓全部的自定名稱
.triggerHandler()：自定義的事件，只會抓第一次的自定名稱
.jQuery.proxy()：接收函數，返回新的函數

※.bind()、.unbind()、.on()、.off()

※基本使用

$(function() {
    $('button').on('click', function(){
        alert(this.tagName);
    });
});
    
function removeEvent(){
    $('button').off('click');
}
----------
<button>click me</button>
<input type="button" value="remove" onclick="removeEvent()" />

※也可以用bind配合off和on配合unbind

※參數

$(function() {
    $('button').on(
        'click', 
        {key1 : $('p:eq(0)').text(), key2 : $('p:eq(1)').text()}, 
        function(e){
            alert(e.data.key1 + ':' + e.data.key2);
        }
    );
});
----------
<button>click me</button>
<p>p1</p>
<p>p2</p>

※事件裡的元素

$(function() {
    $('div').on(
        'click', 
        'span', 
        function(e){
            alert($(this).text());
        }
    );
    
    $('div').on(
        'click', 
        'p', 
        function(e){
            alert($(this).text());
        }
    );
});
    
function removeDiv(){
    $('div').off('click');
}
    
function removeSpanOfDiv(){
    $('div').off('click', 'span');
}
----------
<span>span1</span>
<div>
    div1
    <p>
        p1
        <span>span2</span>
    </p>
</div>
<div>
    div2
    <p>
        p2
        <span>span3</span>
    </p>
</div>
<input type="button" value="removeDiv" onclick="removeDiv()" />
<input type="button" value="removeSpanOfDiv" onclick="removeSpanOfDiv()" />

※bind()的參數沒有什麼selector可以用，所以它會忽略這個參數

※多個事件

$(function() {
    $('input').on(
        {
            click : function(){
                alert('click');
            },
            mouseout : function(){
                alert('mouseout');
            },
            keydown :function(){
                alert('keydown');
            }
        }
    );
});
----------
<input />

※.trigger()

※和內鍵事件配合使用

$(function(){
    $('div').on('click', function() {
        alert($(this).text());
    });
});
    
function testCustomEven(){
    $('div').trigger('click');
}
----------
<div>div</div>
<button onclick="testCustomEven()">fire</button>

※除了點一下會觸發外，按下按鈕也會觸發

※自定名稱

$(function(){
    $('div').on('xxx', function() {
        alert($(this).text());
    });
});
    
function testCustomEven(){
    $('div').trigger('xxx');
}
----------
<div>div</div>
<button onclick="testCustomEven()">fire</button>

※xxx是自定義的，所以只剩按下按鈕會觸發

※傳參數

$(function(){
    $('div').on('xxx', function(e, p1, p2) {
        alert(p1 + ':' + p2);
    });
});
    
function testCustomEven(){
    $('div').trigger('xxx', ['ooo', 'xxx']);
}
----------
<div>div</div>
<button onclick="testCustomEven()">fire</button>

※.triggerHandler()

$(function(){
    $('#o').on('click', function() {
        alert('o');
    });
    
    $('#x').on('click', function() {
        alert('x');
    });
});
    
function testCustomEven(){
    $('[id]').trigger('click');
    // $('[id]').triggerHandler('click');
}
----------
<input id="o" value="ooo" />
<input id="x" value="xxx" />
<button onclick="testCustomEven()">fire</button>

※按下按鈕後，會發現用triggerHandler只會傳回一筆，我試的結果是抓到HTML的順序排在前面的；而trigger會全部都抓

※官網還有說，用了triggerHandler後，原本的行為就不會觸發了
如click是按一下觸發，但用了triggerHandler後，原本的行為不會觸發(就好像上面的例子可以自定名稱，但想要定的名稱內鍵剛好也有)，可是我試的結果用IE 和 Chrome按一下(click)都還是會觸發

※$.proxy()

$(function(){
    $('button').on('click', $.proxy(a.a2, a));
    $('button').on('click', $.proxy(a, 'a2'));
    
    $('button').on('click', $.proxy(b.b2, b, {ooo:'o', xxx:'x'}));
    $('button').on('click', $.proxy(b, 'b2', {ooo:'o', xxx:'x'}));
});
    
var a = {
    a1: "a1",
    a2: function(event) {
        alert(this.a1);
    }
};
    
var b = {
    b1: "b1",
    b2: function(p, event) {
        alert(p.ooo);
        alert(p.xxx);
    }
};
----------
<button>click me</button>

※一共有四種用法
$.proxy(function, context)
$.proxy(context, name)：name是個字串，是context的屬性
context其實就是一個物件；另外兩種是1.6才加的，就是在最後面多個傳參數

※1.9版後，context給null或undefined，會轉換成this