溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下jQuery中bind和unbind事件怎么用，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
綁定其實就是把一些常規時間綁定到頁面，然后進行各種常規操作
解綁就是接觸綁定，綁定的事件失效
要注意，iQuery中的 .事件 如(.click())其實就是單個的綁定事件的簡寫(bind("click"))
html：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>02_事件綁定.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
<link rel="stylesheet" type="text/css" href="./css/style.css" rel="external nofollow" />
</head>
<body>
<div id="panel">
<input type="button" id="start" value="綁定事件">
<input type="button" id="stop" value="解綁事件">
<h6 class="head">什么是jQuery?</h6>
<div class="content">
jQuery是繼Prototype之后又一個優秀的JavaScript庫，它是一個由 John Resig 創建于2006年1月的開源項目。jQuery憑借簡潔的語法和跨平臺的兼容性，極大地簡化了JavaScript開發人員遍歷HTML文檔、操作DOM、處理事件、執行動畫和開發Ajax。它獨特而又優雅的代碼風格改變了JavaScript程序員的設計思路和編寫程序的方式。
</div>
</div>
</body>
<script language="JavaScript">
//當鼠標單次點擊h6標題時,顯示答案;當鼠標雙次點擊h6標題時,隱藏答案
// $("h6").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(){}
// */
// $("h6").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:(可選)回調函數
// */
// $("h6").unbind();
// });
// $("h6").mouseover(function(){
// $("div[class=content]").show();
// }).mouseout(function(){
// $("div[class=content]").hide();
// });
//動態效果
$("#start").click(function(){
/*
* 綁定事件:綁定多個事件
* * 事件名稱之間,用空格隔開
*/
$("h6").bind("mouseover mouseout",function(){
if($("div[class=content]").is(":hidden")){
$("div[class=content]").show();
}else{
$("div[class=content]").hide();
}
});
});
$("#stop").click(function(){
/*
* unbind(type)
* * 默認為空時:解綁定所有事件
* * 指定單個事件:解綁指定的單個事件
* * 指定多個事件:解綁指定的多個事件
*/
$("h6").unbind("mouseover mouseout");
});
</script>
</html>以上是“jQuery中bind和unbind事件怎么用”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
