jQuery——事件

jQuery事件模型


优点:

1. 提供了统一的事件处理方法

2. 允许添加多个事件处理函数

3. 使用标准的事件名称(不带on)

4. 事件实例作为事件处理函数的第一个参数

5. 标准化事件实例最常用的属性

6. 提供了统一的事件取消和阻止默认行为的方法



添加事件处理


on(eventType[,selector][,data],handler)


参数说明:

事件类型选择器数据事件处理函数

选择器、数据为可选参数。


数据在事件处理函数内部,以event的data属性存在。


实例:

$('div').on('click','#p1-1',{foo : 'bar'},function(event){
    console.log(%o , event.data);
})

// %o 就是一个控制台占位符,只是把后面的内容显示出来



one(eventType[,selector][,data],handler)


一次性事件处理

参数和on()方法一样。



事件委托

除了直接给目标元素绑定事件,我们还可以给其父元素绑定事件,利用冒泡机制,产生同样的效果。

通过event.target指定实际发生事件的元素。


实例:

$('ul').on('click',function(event){
    console.log('%o clicked',$(envent.target));
})



统一的阻止方法

stopPropagation()    阻止冒泡

preventDefault()     阻止默认行为

return false         同时阻止冒泡和默认行为



移除事件处理


off(eventType[,selector],handler)


不带任何参数,就会把所有事件都给移除掉。

如果是要取消多个事件类型,就用空格隔开。


实例:

$('ul').on('click',function(event){
    console.log('%o clicked',$(envent.target));
})

$('ul').off('click');




支持的事件


jQuery——事件_第1张图片

jQuery——事件_第2张图片



事件实例对象


实例对象属性

标红的属性,有浏览器兼容性问题。

不过jQuery已经做了处理,直接使用即可。


jQuery——事件_第3张图片

jQuery——事件_第4张图片



实例对象方法


               preventDefault()      阻止默认行为

              stopPropagation()      阻止事件冒泡  

     stopImmediatePropagation()      阻止事件冒泡以及后续相同类型事件


           ispreventDefaulted()      检测是否调用了preventDefault()

         isPropagationStopped()      检测是否调用了stopPropagation()

isImmediatePropagationStopped()      检测是否调用了stopImmediatePropagation()



触发事件(主动)


语法

trigger(eventType[,data])

triggerHandler(eventType[,data])


区别

jQuery——事件_第5张图片

triggerHandler不能触发链式运动

trigger更接近用户真实行为,triggerHandler则是主要为了触发事件处理函数。


实例

现在有一组li和一个button,点击button,主动触发li绑定的click的事件。

$('li').on('click',function(event){
    console.log('已读 %o',$(this));
    return '123';
})

$('button').on('click',function(){

    //让li,主动触发click事件

    //所有li都被触发
    $('li').tiggle('click');

    //只有第一个li被触发
    $('li').tiggleHandler('click');
})



快捷事件方法


jQuery——事件_第6张图片

jQuery——事件_第7张图片



使用

eventName([data,]handler)

eventName()


实例

$('li').click(function(event){
    console.log('已读 %o',$(this));
})



hover事件

主要是弥补onmouseover、onmouseout的不足。


看个例子


jQuery——事件_第8张图片

如果采用onmouseover、onmouseout,鼠标进入outer1的时候没问题,会触发outer1的onmouseover。

但是鼠标进入inner1的时候,却触发了outer1的onmouseout事件。



语法

hover(enterHandler , leaveHandler)

hover(handler)



自定义事件

jQuery通过on()方法,可以绑定原生事件。

trigger()方法,提供给我们主动触发事件的能力。

组合使用,我们便可以实现自定义事件了。


实例

$('#elem').on('自定义事件类型', function(event,arg1,arg2) {
     // 执行代码块
 });
$('#elem').trigger('自定义事件类型',['参数1','参数2'])

你可能感兴趣的:(jQuery)