jQuery事件

jQuery事件是DOM事件的封装，同时支持自定义的扩展。
绑定事件：bind、on、live、delegate、keyup(<function>)；
触发事件：trigger('keyup')、keyup()；
解绑事件：unbind、off、die、undelegate。

1、delegate定义和用法

.delegate是另一种绑定事件的方式。为指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。它将事件处理函数绑定在指定的根元素上， 由于事件会冒泡，它用来处理指定的子元素上的事件。

使用 delegate() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）。

$(selector).delegate(childSelector,event,data,function) 

//childSelector 必需。规定要附加事件处理程序的一个或多个子元素。
//event 必需。规定附加到元素的一个或多个事件。由空格分隔多个事件值。必须是有效的事件。
//data  可选。规定传递到函数的额外数据。
//function  必需。规定当事件发生时运行的函数。

//例如
<div id="root">
  <a>Alice</a>
  <a>Bob</a>
</div>
$('#root').delegate('a', 'click', function(){
    console.log('clicked');
});

2、事件绑定：bind

使用javascript绑定一个事件很简单，只需要在HTML中设置onxxx属性， 并且在javascript中定义相关的处理函数便可以完成。

---

<div onclick="func()"></div>
<script>
function func(){
    console.log('clicked!');
}
</script>

3、自定义事件

---

jQuery事件是基于DOM事件的，但jQuery提供了更加普遍的事件机制。 这使得我们可以方便地自定义事件，只需要给一个尚不存在的事件名即可：

<div id='foo'></div>
<script>
$('#foo').bind('fucked', function(){
    console.log("I'm fucked.");
});
$('#foo').trigger('fucked');
</script>

4、 on

事实上，.on()才是jQuery事件的提供者。其他的事件绑定方法都是通过.on()来实现的，请看jQuery1.8.2的源码：

bind: function( types, data, fn ) {
    return this.on( types, null, data, fn );
},
unbind: function( types, fn ) {
    return this.off( types, null, fn );
},

live: function( types, data, fn ) {
    jQuery( this.context ).on( types, this.selector, data, fn );
    return this;
},
die: function( types, fn ) {
    jQuery( this.context ).off( types, this.selector || "**", fn );
    return this;
},

delegate: function( selector, types, data, fn ) {
    return this.on( types, selector, data, fn );
},
undelegate: function( selector, types, fn ) {
    return arguments.length === 1 ? this.off( selector, "**" ) : this.off( types, selector || "**", fn );
},

事件冒泡与默认行为

---

在DOM中默认情况下，事件是会冒泡的，即同样的事件会沿着DOM树逐级触发。 有时这是我们不希望的行为，可以在事件处理函数中阻止它。

// 事件处理函数的第一个参数是一个事件对象
$('#foo').click(function(event){
    event.stopPropagation();
    event.preventDefault();
    // do sth.
});

在实践中，我们常常让事件处理函数return false来阻止冒泡和默认行为， 可以认为return false做了三件事情：
stopPropagation()；
preventDefault()；
立即结束当前函数并返回。