jquery事件绑定和解绑
事件的绑定和解绑
<input id="btnId" type="button" onclick="clickFn()" value="点我,弹框"/>
方式1:在标签中写死
- function clickFn(){}
方式2:在程序中动态绑定,但是不能解绑
- $("#btnId").click(function(){});
方式3:在程序中动态绑定,可以解绑
$("#btnId").on(“click”,function(){});
$("#btnId").on(“mouseover”,function(){});
这种绑定事件的方式可以解绑
$("#btnId").off(“click”);
$("#btnId").off(“mouseover”);jQuery元素对象.off(事件名称);//如果off不加参数,表示解除所有事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
</head>
<script type="application/javascript">
$(function () {
$("#btnId3").on("click", function () {
alert("jquery绑定");
});
$("#btnId4").on("click", function () {
//解绑
/*
如果off加参数,表示解绑的是某一个事件,
如果off不加参数,表示解除所有事件
*/
alert("jquery解绑");
$("#btnId3").off("click");
})
});
</script>
<body>
<input id="btnId3" type="button" value="点我-jquery绑定"/>
<input id="btnId4" type="button" value="点我-解绑"/>
</body>
</html>
运行效果: