jQuery綁定事件
普通綁定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<script src="jquery-1.12.1.js"></script>
<script>
$(function () {
//為按鈕綁定鼠標(biāo)進(jìn)入,鼠標(biāo)離開(kāi),點(diǎn)擊事件
//第一種寫(xiě)法
// $("#btn").mouseenter(function () {
// $(this).css("backgroundColor","red");
// });
// $("#btn").mouseleave(function () {
// $(this).css("backgroundColor","green");
// });
// $("#btn").click(function () {
// alert("啊~我被點(diǎn)了");
// });
//第二種寫(xiě)法:鏈?zhǔn)骄幊?div style="height:15px;">
// $("#btn").mouseenter(function () {
// $(this).css("backgroundColor","red");
// }).mouseleave(function () {
// $(this).css("backgroundColor","green");
// }).click(function () {
// alert("啊~我被點(diǎn)了");
// });
//第三種寫(xiě)法:bind方法綁定事件
// $("#btn").bind("click",function () {
// alert("哦買雷電嘎嘎鬧");
// });
// $("#btn").bind("mouseenter",function () {
// $(this).css("backgroundColor","red");
// });
// $("#btn").bind("mouseleave",function () {
// $(this).css("backgroundColor","green");
// });
//第四種寫(xiě)法:bind鏈?zhǔn)骄幊?div style="height:15px;">
// $("#btn").bind("click",function () {
// alert("哦買雷電嘎嘎鬧");
// }).bind("mouseenter",function () {
// $(this).css("backgroundColor","red");
// }).bind("mouseleave",function () {
// $(this).css("backgroundColor","green");
// });
//第五種寫(xiě)法:使用鍵值對(duì)的方式綁定事件
// $("#btn").bind({"click":function () {
// alert("哦買雷電嘎嘎鬧");
// },"mouseenter":function () {
// $(this).css("backgroundColor","red");
// },"mouseleave":function () {
// $(this).css("backgroundColor","green");
// }});
});
</script>
</head>
<body>
<input type="button" value="顯示效果" id="btn"/>
</body>
</html>
通過(guò)父元素綁定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
div {
width: 200px;
height: 100px;
border: 2px solid green;
}
p {
width: 150px;
height: 50px;
border: 1px solid red;
cursor: pointer;
}
</style>
<script src="jquery-1.12.1.js"></script>
<script>
//點(diǎn)擊按鈕為div中的p標(biāo)簽綁定事件
$(function () {
$("#btn").click(function () {
//為父級(jí)元素綁定事件,父級(jí)元素代替子級(jí)元素綁定事件
//子級(jí)元素委托父級(jí)綁定事件
//父級(jí)元素調(diào)用方法,為子級(jí)元素綁定事件
$("#dv").delegate("p", "click", function () {
alert("啊!~,被點(diǎn)了");
});
});
});
//為元素綁定事件三種方式
/*
* 對(duì)象.事件名字(事件處理函數(shù));---$("#btn").click(function(){});
* 對(duì)象.bind("事件名字",事件處理函數(shù));---$("#btn").bind("click",function(){});
* 父級(jí)對(duì)象.delegate("子級(jí)元素","事件名字",事件處理函數(shù));---->$("#dv").delegate("p","click",function(){});
*
*
* */
</script>
</head>
<body>
<input type="button" value="為div綁定事件" id="btn"/>
<div id="dv">
<p>這是p</p>
</div>
</body>
</html>
綁定相同事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<script src="jquery-1.12.1.js"></script>
<script>
$(function () {
//為按鈕綁定多個(gè)相同事件
$("#btn").click(function () {
console.log("小蘇好猥瑣哦");
}).click(function () {
console.log("小蘇好美啊");
}).click(function () {
console.log("天冷了,注意身體");
});
// $("#btn").bind("click",function () {
// console.log("哈哈,我又變帥了");
// }).bind("click",function () {
// console.log("我輕輕來(lái),正如我輕輕走,揮一揮手,不帶走一個(gè)妹子");
// });
//bind方法綁定多個(gè)相同的事件的時(shí)候,如果使用的是鍵值對(duì)的方式,只能執(zhí)行最后一個(gè)
// $("#btn").bind({"click":function () {
// console.log("如果有一天我邪惡了");
// },"click":function () {
// console.log("請(qǐng)記住,我曾純潔過(guò)");
// }});
});
//bind方法內(nèi)部是調(diào)用的另一個(gè)方法綁定的事件
</script>
</head>
<body>
<input type="button" value="顯示效果" id="btn"/>
</body>
</html>
不同方法的區(qū)別
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<script>
/*
*
* 對(duì)象.事件名字(事件處理函數(shù));--->普通的寫(xiě)法
* 對(duì)象.bind(參數(shù)1,參數(shù)2);---->參數(shù)1:事件的名字,參數(shù)2:事件處理函數(shù)
* 前兩種方式只能為存在的元素綁定事件,后添加的元素沒(méi)有事件
*
* 下面的兩種方式,可以為存在的元素綁定事件,后添加的元素也有事件
* 父級(jí)元素調(diào)用方法,代理子級(jí)元素綁定事件
* 父級(jí)元素對(duì)象.delegate("選擇器","事件名字",事件處理函數(shù));
* 父級(jí)元素對(duì)象.on("事件名字","選擇器",事件處理函數(shù));
*
* 因?yàn)閐elegate方法中是調(diào)用的on的方法
* 所以,以后直接用on就可以了
*
*
*
*
* */
</script>
</head>
<body>
</body>
</html>
