jQuery学习笔记12-绑定及解绑事件
程序员文章站
2022-07-13 12:34:32
...
一、绑定事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery事件绑定</title>
<script src="jQuery/jquery-1.12.4.js"></script>
<script>
$(function () {
/*jQuery绑定事件的两种方式
*1. eventName(fn);
* 可自动联想，编码效率高
* 不支持JavaScript的部分事件
*2. on("eventName",fn);
*不支持自动联想，编码效率低
* 支持JavaScript的所有事件
*
* 注意：jQuery可以同时绑定多个事件，且事件之间不会被覆盖
*
* */
$("button").click(function () {
alert("弹框")
});
$("button").on("click",function () {
alert("弹框2")
})
})
</script>
</head>
<body>
<button>我是按钮</button>
</body>
</html>2.解绑事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery事件解绑</title>
<script src="jQuery/jquery-1.12.4.js"></script>
<script>
$(function () {
/*绑定事件*/
var test = function () {
alert("弹框")
};
$("button").click(test);
$("button").on("click", function () {
alert("弹框2")
});
/*
* 解绑事件使用off方法 */
// 不传入参数,解绑button的所有事件
// $("button").off();
// 传入一个参数，解绑button所有click的事件
// $("button").off("click");
// 出入两个参数，解绑button所有click回调函数为test的事件
$("button").off("click",test);
})
</script>
</head>
<body>
<button>我是按钮</button>
</body>
</html>
下一篇： QQ历年头像打包下载