一、jQuery 事件注册

1. • 单个事件注册

element.事件(function(){}); //例如：$('div').click(function(){事件处理程序})

其他事件和原生基本一致。

比如 mouseover、mouseout、blur、focus、change、keydown、keyup、resize、scroll 等。

二、 jQuery 事件处理

1. • on() 绑定事件

on() 方法在匹配元素上绑定一个或多个事件的事件处理函数

element.on(events,[selector],fn);

events：一个或多个用空格分隔的事件类型，如 "click" 或 "keydown" 。

selector：元素的子元素选择器 。

fn：回调函数，即绑定在元素身上的侦听函数。

1.1 on() 方法优势一

可以绑定多个事件，多个处理事件处理程序。

$('div').on({
事件1: function(){},
事件2: function(){},
事件3: function(){}
});

如果事件处理程序相同，那么可以采取这种形式：

$('div').on('事件1 事件2', function() {
$(this).toggleClass('current');
});

1.2 on() 方法优势二

可以事件委派操作。

事件委派：把原来加给子元素身上的事件绑定在父元素身上，就是把事件委派给父元素。

$(父元素').on('事件', '子元素', function() {
……
});

事件绑定在父元素上，但触发对象是子元素。（点击子元素后会产生事件冒泡到父元素，而父元素上有绑定的事件）

注意：在此之前有 bind()，live()， delegate() 等方法来处理事件绑定或者事件委派，最新版本的请用 on 替代他们。

    
我们都是好孩子
我们都是好孩子
我们都是好孩子
我们都是好孩子
我们都是好孩子

1.3 on() 方法优势三

动态创建的元素，click() 没有办法绑定事件，on() 可以给动态生成的元素绑定事件

$('父元素').on('事件','子元素',function(){
alert("俺可以给动态生成的元素绑定事件")
});

$('父元素').append($('

我是动态创建的p

'));

2. off() 解绑事件

off() 方法可以移除通过 on() 方法添加的事件处理程序。

$("p").off(); // 解绑p元素所有事件处理程序

$("p").off( "事件"); // 解绑p元素上面的点击事件 后面的 foo 是侦听函数名

$("ul").off("事件", "li"); // 解绑事件委托

    
我们都是好孩子
我们都是好孩子
我们都是好孩子

3. one() 绑定事件

如果有的事件只想触发一次， 可以使用 one() 来绑定事件，使用方法和on()基本一致。

element.one(events,[selector],fn);

    
我是屁

4.自动触发事件 trigger()

有些事件希望自动触发, 比如轮播图自动播放功能跟点击右侧按钮一致。可以利用定时器自动触发右侧按钮点击事件，不必鼠标点击触发。

element.click(); // 第一种简写形式

element.trigger("事件"); // 第二种自动触发模式

element.triggerHandler(事件); // 第三种自动触发模式

triggerHandler 模式不会触发元素的默认行为，这是和前面两种的区别。

三、jQuery事件对象

事件被触发，就会有事件对象的产生。

element.on(events,[selector],function(event) {}); //event就是事件对象

事件对象操作：

阻止默认行为：event.preventDefault() 或者 return false

阻止冒泡： event.stopPropagation()