浅谈jQuery中的事件-CSDN博客

页面加载

ready()方法：实现了类似于window.onload事件的功能，但是写法比较多

1.$(document).ready(function(){});
2.$().ready(function(){});
3.$(function(){});

事件绑定与解绑

bind(type,data,callback)方法:绑定事件

type:表示绑定的事件名称(注意:没有on)
data:作为event.data属性传递给事件对象的额外数据对象
callback:表示绑定事件的处理函数

$('button').bind('click',function(){});

unbind(type,data,callback)方法:解绑定事件

type:表示绑定的事件名称(注意:没有on)
data:作为event.data属性传递给事件对象的额外数据对象
callback:表示绑定事件的处理函数
如果只传递事件名称的话，解绑定事件的所有处理函数
如果传递事件名称和指定的处理函数，解绑定该事件的指定处理函数

$('button').unbind('click',函数名称);

bind()与unbind()中的data参数
data参数的值，利用event事件对象的data属性进行接收
该参数的数据内容只能在事件的处理函数中被使用

jQuery中提供多组事件绑定与解绑的方法
1.bind()与unbind()：jQuery 3.0版本后删除方法
2.on()与off()方法：jQuery 1.7版本后新增方法
其实bind()与unbind()的底层方法就是on()和off()
3.live()与die()：jQuery 1.7版本后删除方法
实现事件委托
4.delegate()与undelegate()：jQuery 1.6版本后新增方法，jQuery 3.0版本后删除方法，实现事件委托
5.one()：为事件绑定一次性的函数

事件切换

鼠标悬停事件：
1.mouseover：表示鼠标悬停在指定元素上
2.mouseout：表示鼠标从指定元素上移开
jQuery提供hover(over,out)方法,它可以直接实现鼠标悬停和鼠标从元素上移开的功能

$('button').hover(function(){
    $('div').css('display','block');
},function(){
    $('div').css('display','none');
});

事件模拟

trigger():模拟用户进行触发事件

$('button').bind('click',function(){
    console.log('this is button');
});
//模拟用户触发
$('button').trigger('click');