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对应的是第二个参数的回调函数。

最后

以上就是刻苦大地为你收集整理的jQuery事件jQuery两种绑定事件的方式事件委托事件处理off()解绑事件one()只触发事件一次自动触发事件自定义事件事件命名空间事件对象移入移出事件的全部内容，希望文章能够帮你解决jQuery事件jQuery两种绑定事件的方式事件委托事件处理off()解绑事件one()只触发事件一次自动触发事件自定义事件事件命名空间事件对象移入移出事件所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。