浅谈jQuery的bind和unbind事件(绑定和解绑事件)

作者:袖梨 2022-06-25

绑定其实就是把一些常规时间绑定到页面,然后进行各种常规操作

解绑就是接触绑定,绑定的事件失效

要注意,iQuery中的 .事件 如(.click())其实就是单个的绑定事件的简写(bind("click"))

html:

代码如下 复制代码

02_事件绑定.html

什么是jQuery?

jQuery是继Prototype之后又一个优秀的JavaScript库,它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性,极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。

//当鼠标单次点击h5标题时,显示答案;当鼠标双次点击h5标题时,隐藏答案

// $("h5").click(function(){

// if($("div[class=content]").is(":hidden")){

// $("div[class=content]").show();

// }else{

// $("div[class=content]").hide();

// }

// })

// //动态效果

// $("#start").click(function(){

// /*

// * 动态绑定点击事件:绑定单个事件

// * bind(type,data,fn)

// * * type:指定要绑定的事件名称

// * * data:(可选)作为event.data属性值传递给事件对象的额外数据对象

// * * fn:回调函数,function(){}

// */

// $("h5").bind("click",function(){

// if($("div[class=content]").is(":hidden")){

// $("div[class=content]").show();

// }else{

// $("div[class=content]").hide();

// }

// });

//

// });

// $("#stop").click(function(){

// /*

// * 动态解绑定点击事件

// * unbind(type,fn)

// * * type:(可选)指定要解绑的事件名称

// * * fn:(可选)回调函数

// */

// $("h5").unbind();

// });

// $("h5").mouseover(function(){

// $("div[class=content]").show();

// }).mouseout(function(){

// $("div[class=content]").hide();

// });

//动态效果

$("#start").click(function(){

/*

* 绑定事件:绑定多个事件

* * 事件名称之间,用空格隔开

*/

$("h5").bind("mouseover mouseout",function(){

if($("div[class=content]").is(":hidden")){

$("div[class=content]").show();

}else{

$("div[class=content]").hide();

}

});

});

$("#stop").click(function(){

/*

* unbind(type)

* * 默认为空时:解绑定所有事件

* * 指定单个事件:解绑指定的单个事件

* * 指定多个事件:解绑指定的多个事件

*/

$("h5").unbind("mouseover mouseout");

});

相关文章

精彩推荐