浅谈jQuery中的事件

发布时间:2019-05-22 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了浅谈jQuery中的事件脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

页面加载

  • 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');

脚本宝典总结

以上是脚本宝典为你收集整理的浅谈jQuery中的事件全部内容,希望文章能够帮你解决浅谈jQuery中的事件所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签: