jQuery——事件

jQuery事件

事件的绑定（两种方式）事件的移除事件冒泡默认行为事件自动触发自定义事件事件的命名空间事件委托移入移出事件

事件的绑定（两种方式）

1、eventName(fn)

//编码效率高。部分事件jQuery没有实现。 $('button').click(function(){})

2、on(‘eventName’,fn)

//编码效率低。所有js事件都可以添加 $('button').on('click',function(){})

注意：两种事件绑定方法都可以添加相同或者不同的类型的事件，不会覆盖

事件的移除

1、off()

//off方法如果不传参数，会移除所有的事件 $('button').off() //off方法如果传递一个参数，会移除所有指定类型的事件 $('button').off('click') //off方法如果传递两个参数，会移除所有指定类型的指定事件 $('button').off('click',test1)

事件冒泡

原理：触发子元素事件的同时，若父元素也有事件，则事件逐级向上传递。同类型事件会被一同触发

阻止事件冒泡： 1、在子元素事件的回调函数中添加 return false 2、利用子元素事件中的参数event的方法：event.stopPropagation()

默认行为

部分元素有默认的一些行为，例如 a标签，表单的提交按钮等

阻止默认行为： 1、在触发事件的回调函数中添加 return false 2、通过event的方法：event.preventDefault()

事件自动触发

1、trigger()

//如果用trigger自动触发事件，会触发事件冒泡、会触发默认行为 $('.son').trigger('click')

2、triggerHandler()

//如果用triggerHandler自动触发事件，不会触发事件冒泡、不会触发默认行为 $('.son').triggerHandler('click')

自定义事件

//必须满足两个条件 //1、事件必须是通过on绑定的 //2、事件必须通过trigger来触发 $('div').on('myClick',function(){}) $('div').trigger('myClick')

事件的命名空间

$('div').on('click.zs',function(){ alert('click1') }) $('div').on('click.ls',function(){ alert('click2') }) $('div').trigger('click.zs')

作用：用来区分不同的人所添加的事件，通过trigger来单独触发某一个事件

注意： 1、利用trigger触发子元素带命名空间的事件，那么父元素带相同命名空间的事件也会被触发，而父元素没有命名空间的事件不会被触发 2、利用trigger触发子元素不带命名空间的事件，那么子元素所有相同类型的事件和父元素所有相同类型的事件都会被触发

事件委托

//作用：监听动态添加的元素的某些事件 //将 li 的点击事件委托给 ul $('ul').delegate('li','click',function(){})

移入移出事件

注意：mouseover/mouseout事件，子元素被移入移出的时候也会触发父元素的事件

$('.father').mouseover(function(){ console.log('father被移入了') }) $('.father').mouseout(function(){ console.log('father被移出了') })

注意：mouseenter/mouseleave事件，子元素被移入移出的时候不会触发父元素的事件（推荐使用）

$('.father').mouseenter(function(){ console.log('father被移入了') }) $('.father').mouseleave(function(){ console.log('father被移出了') })

hover()方法

//将移入移出事件整合到一起，可以接收一个参数，也能接收两个参数 $('father').hover(function(){ console.log('father被移入了') },function(){ console.log('father被移出了') }) $('father').hover(function(){ console.log('father被移入移出了') })