四種綁定事件
阿新 • • 發佈：2017-07-01
lis float ext rip none har set die xhtml
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>New Web Project</title>
<style type="text/css">
li{
float:left;
margin-left:50px;
list-style:none;
}
</style>
<script src="js/jQuery1.11.1.js"></script>
<script src="js/jquery-migrate-1.2.0.js"></script>
<script type="text/javascript">
$(function () {
//dom 2 級註冊 bind()
//live
$("li").live({
mouseover:function(){
$(this).css("background","pink");
},
mouseout:function(){
$(this).css("background","");
}
});
$("li").die("mouseout");
//on 推薦使用
/* $("li").on({ //選擇元素
mouseover:function(){ //將li和mouseover事件綁定
$(this).css("background","pink");
},
mouseout:function(){ //復合綁定mouseout
$(this).css("background","");
}
});
$("li").off("mouseout"); //off()用來解除mouseout事件綁定
*/
//delegate
/* $("ul").delegate("li",{
mouseover:function(){
$(this).css("background","pink");
},
mouseout:function(){
$(this).css("background","");
}
});
$("ul").undelegate("mouseout"); */
/* $("li").bind({
mouseover:function(){
$(this).css("background","pink");
},
mouseout:function(){
$(this).css("background","");
}
});
//卸載事件
$("li").unbind("mouseout mouseover"); */
});
</script>
</head>
<body>
<ul>
<li>首頁</li>
<li>公司信息</li>
<li>人才計劃</li>
</ul>
</body>
</html>
四種綁定事件