jQuery事件

jQuery两种绑定事件的方式

注意
一个元素可以添加多个相同或者不同的事件，不会产生覆盖问题。

（1）eventName(fn)

语法：eventName(fn)
编码效率略高，但是部分事件jQuery没有实现，所以不能直接用该方法来绑定jQuery没有实现的事件。优先使用此方法

$('button').click(function(){})//为button绑定click事件

（2）事件处理on()绑定事件

on()方法在匹配元素上绑定一个或者多个事件的事件处理函数
编码效率略低，所有js都可添加。

语法：
element.on(events,[selector],fn)
注意：
events：一个或多个用空格绑定的事件类型；selector：元素的子元素选择器；fn：回调函数，及绑定在element身上的函数。
on绑定一个或者多个事件：
例子1：

$("div").on(
	{
	mouseenter:functionn(){
	$(this).css("background","blue");
	},
	{
	click:function(){
	$(this).css("background","yellow");
	}
	

注意：
绑定多个事件时，采用对象的键值对的形式进行多个事件的绑定。
例子2：

$("div").on("mouseenter mouseleave",function(){
	$(this).toggleClass("current");
	});

注意：
当多个事件对应同一个回调函数时，可用空格对多个事件进行事件绑定到同一个元素，toggleClass()表示如果元素有current类时，则删除current类，如果没有，则添加current类。

事件委托

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

on实现事件委托

$("ul").on("click","li",function(){
	alert($(this).html())
	});

delegate实现事件委托

$("ul").delegate("li","click",function(){
	alert($(this).html())
	})

注意
click事件由li元素触发，通过冒泡触发父元素身上绑定的ul的click事件，所以this指向所点击的li。
on实现动态创建元素绑定事件
绑定事件到父元素上面，即使事件触发之前没有子元素，但可以在元素创建后触发父元素之前绑定的事件，实现动态创建事件绑定事件。

事件处理off()解绑事件

off()方法可以移除绑定在元素身上的事件。
解绑所有事件：
例子：

$("div").off();//解绑div身上绑定的所有事件。

解绑元素身上的某个事件：
例子：

$("div").off(事件名) //解除div身上的某事件。

移除指定类型的指定的某个事件

var test1 = function(){
	alert('test1')
	}
$('div').click(test1)

$('div').off('click',test1)  //移除回调函数test1的click事件,只能一次解绑一个事件。

解绑事件委托：
例子：

$("ul").on("click","li");//解绑li委托给Ul的click事件。

one()只触发事件一次

例子：

$("div").one("click",function(){
	alert(11);
	})     //只触发绑定在div身上的click事件一次，之后div身上的click事件失效。

自动触发事件

方式1：

element.click()  //为element添加事件click，使浏览器开启时自动触发。会触发元素的默认行为。

例子：

$('div').on('click', function () {
      alert(11)
    })
$('div').click()  //触发由on绑定在div身上的事件click。

方式2：

element.trigger("type")  //trigger自动触发事件。会触发元素的默认行为。

例子：

$('div').on('click',function(){
alert(11);
})
$('div').trigger('click')  //自动触发由on绑定到div身上的click事件。

方式3：

element.triggerHandler("type")  //triggerHandler自动触发事件，但不会触发被触发元素的默认行为。

例子：

$('input').on('focus',function(){
	$(this).val('hello');
	});
$('input').triggerHandler('focus');  //input的focus事件的默认行为是自动聚焦，但通过triggerHandler绑定的自动触发事件不会是input的focus事件自动聚焦。

注意
triggerHandler绑定的触发事件不会触发默认行为和事件冒泡。

自定义事件

满足条件才能绑定：

1. 事件必须通过on绑定
2. 事件必须通过trigger或者triggerHandler触发

$('div').on('myClick',function(){
	alert('myclick'
	})
$('div').trigger('myclick')
//或者
$('div').triggerHandler('myclick')

事件命名空间

满足条件：

1. 事件必须通过on绑定
2. 事件必须通过trigger或者triggerHandler触发
   语法：
   element.on(事件名.命名空间,fn)

$("div").on("click.zs", function () {
          alert("click1")
        })//命名空间是zs
        $("div").on("click.ls", function () {
          alert("click2")
        })//命名空间是ls
        $("div").trigger("click.zs")

事件对象

事件被触发，就会产生事件对象；

element.on(events,[selector],function(event){}) //event为事件对象。

事件对象方法有：
1）阻止默认行为：event.preventDefault()或者return false
2）阻止冒泡：event.stopPropagation()/return false。
注意
return false不是事件对象方法，但也可以阻止默认行为和事件冒泡。

移入移出事件

mouseover/mouseout事件：
鼠标移入/移出事件：设置在父元素身上的mouseover和mouseout事件，也会在子元素身上触发。
mouseenter/mouseleave事件：
鼠标移入/移出事件：设置在父元素身上的mouseenter/mouseleave事件，只会在父元素身上触发，不会在子元素身上触发。
hover事件：
鼠标移入移出事件：是mouseenter和mouseleave事件的集合体，也只会在父元素身上触发，不会在子元素身上触发，hover()事件可以接收一个参数，也可以接收两个参数，接收一个参数时，mouseenter和mouseleave同时触发该参数的回调函数；接收两个参数时，mouseenter对应的是第一个参数的回调函数，而mouseleave对应的是第二个参数的回调函数。