本文小編為大家詳細介紹“jquery事件如何綁定”，內容詳細，步驟清晰，細節處理妥當，希望這篇“jquery事件如何綁定”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。
bing()用來綁定事件，例如：
unbind()用來解除事件的綁定。例如：
on()方法用來綁定事件，例如：
off()方法用來解除事件的綁定，例如：
注意：
建議用on()方法綁定事件，效率更高。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>事件綁定</title>
<!--引入jQuery-->
<script src="../jquery-3.3.1.js"></script>
<!--javascript-->
<script>
$(function(){
// 正常情況下的鼠標移入背景色變為灰色，移出時變為白色
// 鼠標移入
/* $("#menu li").mouseover(function(){
$(this).css("background-color","gray");
});
// 鼠標移出
$("#menu li").mouseout(function(){
$(this).css("background-color","white");
}); */
//bind()綁定事件
$("#menu li").bind("mouseover",function(){
$(this).css("background-color","gray");
});
$("#menu li").bind("mouseout",function(){
$(this).css("background-color","white");
});
// bind()綁定多個事件
/* $("#menu li").bind("click mouseover",function(){
$(this).css("background-color","gray");
}); */
// bind()綁定多個事件
/* $("#menu li").bind({
click:function(){$(this).css("background-color","#ccc");},
mouseover:function(){$(this).css("background-color","yellow");}
}); */
// 解除綁定事件
//$("#menu li").unbind(); // 解除所有的事件
//$("#menu li").unbind("click");// 只解除click事件，保留鼠標移入事件
// on()綁定事件
// 處理添加背景色效果
$("#menu").on("mouseover","li",{},function(){
$(this).css("background-color","#ccc");
});
$("#menu").on("mouseout","li",{},function(){
$(this).css("background-color","yellow");
});
// off()解除綁定
$("#menu").off("mouseout","li"); // 只移除moustout事件
});
</script>
</head>
<body>
<input type="button" value="添加" />
<ul id="menu">
<li>HTML</li>
<li>XHTML</li>
<li>CSS</li>
</ul>
</body>
</html>讀到這里，這篇“jquery事件如何綁定”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
