jQuery事件#
目标#
- 能够说出4种常见的注册事件
- 能够说出on绑定事件的优势
- 能够说出jQuery事件委派的优点以及方式
- 能够说出绑定事件与解绑事件
jQuery事件注册#
单个事件注册#
语法：
jQuery
element.事件(function(){})
$('div').click(function(){事件处理程序})
其它事件和原生基本一致。
比如mouseover、mouseout、blur、focus、change、keydown、keyup、resize、scroll等
jQuery事件处理#
事件处理on()绑定事件#
on()方法在匹配元素上绑定一个或多个事件的事件处理函数
语法：
jQuery
element.on(events,[selector],fn)
-
events：一个或多个用空格分隔的事件类型，如click或keydown -
selector：元素的子元素选择器 -
fn：回调函数，即绑定在元素身上的侦听函数。
on()方法优势1：#
可以绑定多个事件，多个处理事件处理程序。
jQuery
// 1.不同事件不同处理
$('div').on({
mouseover:function(){},
mouseout:function(){},
click:function(){}
});
// 2.不同事件相同处理
$('div').on('mouseover mouseout',function(){
$(this).toggleClass('current');
});
on()方法优势2：#
可以事件1委派操作。事件委派的定义就是：把原来给子元素身上绑定的事件绑定在父元素身上，即将事件委派给父元素。
jQuery
$('ul').on('click','li',function(){
alert('hello world!');
});
$('ul').one('click',function(){}); // 只触发一次事件
在此之前有bind()，live()，delegate()等方法来处理事件绑定或者事件委派，最新版本的使用on替代他们。
on()方法优势3：#
动态创建的元素，click()方法没有办法绑定事件，on()可以给动态生成的元素绑定事件。
鼠标移入变蓝，点击变紫
- hello
- hello
- hello
- 普通li
- 普通li
事件处理off()解绑事件#
off()方法可以移除通过on()方法添加的事件处理程序
jQuery
$('div').off(); // 解绑所有事件
$('div').off('click'); // 解绑点击事件
$('ul').off('click','li'); // 解绑事件委托
若有的事件只想触发一次，可以使用one()来绑定事件。
自动触发事件trigger()#
有些事件希望自动触发，比如轮播图自动播放功能跟点击右侧按钮一致，可以利用定时器自动触发右侧按钮点击事件，不必鼠标点击触发。
jQuery
element.click(); //第一种简写形式
element.trigger('事件'); // 第二种自动触发
$('p').on('click',function(){
alert('hi~');
});
$('p').trigger('click'); // 此时自动触发点击事件，不需要鼠标点击
element.triggerHandler('事件'); // 第三种自动触发模式
triggerHandler
不会触发元素的默认行为
会触发默认行为(input光标)的自动触发
不会触发默认行为的自动触发