jquery事件学习

绑定事件

1.bind

参数：

（eventType [, eventData ], handler(eventObject) ），eventType可以是自定义的事件，此时不能通过浏览器触发，可以通过trigger手动触发。此外，trigger()方法来了解如何在事件发生时向事件处理函数中传入参数，而不是在事件绑定的时候传递数据。

2.unbind

用于解除bind所绑定的事件，其中有一个用法：

var timesClicked = 0;
$( "#foo" ).bind( "click", function( event ) {
alert( "The quick brown fox jumps over the lazy dog." );
timesClicked++;
if ( timesClicked >= 3 ) {
$( this ).unbind( event );//为毛要用event？
}
});

3.on

.on(eventType,selector,data,handler)

selector

表示选中元素的后代元素中被过滤出来的能够绑定事件的元素。即：

当提供selector参数时，事件处理程序是指为委派事件（通常也有很多人叫它代理事件）。事件不会在直接绑定的元素上触发，但当selector参数选择器匹配到后代（内部元素）的时候，事件处理函数才会被触发。

注意：事件处理只能绑定在当前被选中的元素上;而且，在您的代码调用.on()的时候，他们必须已经存在。为了确保目前的元素可以被选择，即已经存在，最好将脚本放在元素的HTML标记的后面或者在 document 的 ready 事件中进行事件绑定。

那么使用事件委派有个好处就是，在已经存在的父元素上绑定了事件，后代元素能够在添加到文档后，处理这些事件。即可以给未创建的后代元素绑定事件。

事件代理的另一个好处是，当需要为多个元素添加同一个事件的时候，只需要为他们的父元素添加事件代理就行了，这样开销更小。来看下面的区别：

给每个tr添加事件–普通版：

$( "#dataTable tbody tr" ).on( "click", function() {
console.log( $( this ).text() );
});

给每个tr添加事件–使用事件代理：

$( "#dataTable tbody" ).on( "click", "tr", function() {
console.log( $( this ).text() );
});

data参数

在事件触发的时候作为event.data的属性传递给事件处理程序，data参数可以是任何类型，但如果是字符串类型时，那么selector参数必须提供，或明确地传递null，这样的 data 参数不会误认为是选择器。最好是使用一个对象（键值对） ，所以可以作为属性传递多个值。

如果在事件处理程序（闭包）中想要使用一个全局变量，而该全局变量的值可变化，那么想要使用某个状态的值可以将全局变量当前的值作为data参数传递。

事件处理函数作用域

当jQuery的调用处理程序时，this关键字指向的是当前正在执行事件的元素。对于直接事件而言，this 代表绑定事件的元素。对于代理事件而言，this 则代表了与 selector 相匹配的元素。

注意：当事件被首次触发时，处理函数列表才会被设置到元素上。当前元素上添加或删除事件处理函数不会立即生效，直到下一次的事件被处理：

var $test = $( "#test" );

function handler1() {
console.log( "handler1" );
$test.off( "click", handler2 );
}

function handler2() {
console.log( "handler2" );
}

$test.on( "click", handler1 );
$test.on( "click", handler2 );

handler2在第一次点击test时一定会执行，因为执行第一次handler1时，handler2事件处理程序还没有设置到元素上，就无所谓off了。

事件对象

1.event.stopPropagation()

阻止事件冒泡到父元素上。

2.event.stopImmediatePropagation()

除了阻止事件冒泡到父元素上，还阻止了当前元素上其他对同一个事件的（不同）处理函数的执行：

btn.on({
click:function(event){
show.text('click here');
event.stopImmediatePropagation();
},
dblclick:function(){
show.text('double click here');
}
});
btn.on('click',function(){
show.text('click second');  //执行不了
});

调用event.stopPropagation() 和 event.preventDefault()会从一个事件处理程序会自动返回false。也可以直接将 false 当作事件处理函数中的 handler 参数。