浅谈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');
    原文作者:庄国琳
    原文地址: https://segmentfault.com/a/1190000016342484
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞