本文多次分析了jQuery事件的绑定和解除绑定。分享给大家参考，如下：

JQuery事件绑定非常常见。我相信你经常使用点击、聚焦、模糊等事件。但是如果将多个方法绑定到控件的一个事件，覆盖、累积或其他效果会发生什么？今天我就来测试一下这个问题，说说怎么解。

1.jQuery事件被绑定多次

head script src=' http :http://libs . Baidu.com/jquery/2 . 0 . 0/jquery . min . js '/script script type=' text/JavaScript ' $(文档)。ready(function(){//Second bind $(' # btnadd '))。click(function(){ alert(' bind click 1 ')；});//绑定$ ('# btnadd ')。on ('click '，function () {alert ('bindclick 2 ')第三次；});//绑定$ ('# btnadd ')。第四次绑定(' click '、function(){ alert(' bind click 3 ')；});});函数add 1(){ alert(' add 1()')；}/script/head body H2 user controller-Index/H2！-首次绑定-input type=' button ' id=' btnadd ' name=' btnadd ' value=' add ' onclick=' add1()'//body验证结果：多次绑定控件的一个事件会叠加效果，如下图截图所示：

第二，jQuery事件解除绑定

因为您可以绑定事件，所以您也应该能够解除它们的绑定。下面显示了解除绑定的方法：

head script src=' http :http://libs . Baidu.com/jquery/2 . 0 . 0/jquery . min . js '/script script type=' text/JavaScript ' $(文档)。ready(function () { $('#btnAdd '))。click(function(){ alert(' bind click 1 ')；});$('#btnAdd ')。on('click '，add 2)；$('#btnAdd ')。绑定(' click '，add 3)；});函数add 1(){ alert(' add 1()')；}函数add 2(){ alert(' bind click 2 ')；}函数add 3(){ alert(' bind click 3 ')；} function cancelBind() {//如果不指定方法名，则click事件对应的所有方法都将被解除绑定，标签中onclick设置的方法仍将执行//$('#btnAdd ')。关闭(“点击”)；//$('#btnAdd ')。解除绑定(“点击”)；//解除绑定add2方法$('#btnAdd ')。对应于点击事件的off(‘click’，add 2)；//$('#btnAdd ')。解除绑定(' click '，add 3)；}/script/head body h2user controller-CancelBind/H2 Input type=' button ' id=' btnAdd ' name=' btnAdd ' value=' Add ' onclick=' add1()'/Input type=' button ' id=' btncancelbind ' name=' btncancelbind ' onclick=' CancelBind()'//body感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun来测试上述代码的运行效果。

更多对jQuery感兴趣的读者，请查看本站话题：《jQuery常见事件用法与技巧总结》、《jQuery常用插件及用法总结》、《jQuery操作json数据技巧汇总》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jquery选择器用法总结》、0103010。

希望本文对大家的jQuery程序设计有所帮助。