jquery中click等事件绑定及移除的几种方法小结

更新时间：2024年01月25日 23:40:42 投稿：mdxy-dxy

这篇文章主要介绍了jquery中绑定事件与解绑事件是常用到的写法，这里总结了几种常见的绑定事件与解绑事件的方法,需要的朋友可以参考下

绑定click事件

一：直接在html标签里添加事件

HTML元素行间事件(这种写法是JavaScript原生事件)

<input id="btn" type="button" value="点我" onclick="test();" />
<script>
	function test() {
	    alert("行间事件");
	}
</script>

缺点：html与js紧密耦合

二：使用jq的click方法绑定

$("#btn").click(function(){
     alert("jquery使用click绑定事件");
})

三：使用jq的bind方法绑定

$("#btn").bind("click",function(){
   alert("jquery使用bind绑定事件");
})

四：使用jq的on方法绑定

$("#btn").on("click",function(){
    alert("jquery使用on绑定事件");
})

五：使用jq的可绑定动态元素的on方法绑定

 $("body").on("click","#btn", function () {
      alert("jquery使用on可绑定动态元素事件");
 })

点击按钮，这五个事件都会执行，执行顺序：1>2=3=4>5
其中行间事件onclick这种写法的事件最先触发，其次是监听事件click方法绑定，这种写法和写法三的on方法、方法四的bind方法是相同的，他们三者间的顺序取决于代码的顺序，谁在前那么谁就先绑定，方法五也是使用了on方法，但是这种写法可以给动态元素绑定事件，比如我们通过发送服务器请求动态加载到页面的元素，加载后的元素默认是没有绑定事件的，但是使用方法五可以成功为这种动态元素绑定事件，这种写法其实是发生的事件委托，监听父元素body，然后代替子元素执行click事件,所以是执行顺序在前面四种后。

移除click事件

方式一的移除：

<input id="btn" type="button" value="点我" onclick="test();" />
function test() {
    alert("行间事件");
}

这种写法其实可以理解为：

<input id="btn" type="button" value="点我" />
/*点击的时候执行函数*/
document.getElementById("btn").onclick = test;
/*定义函数*/
function test() {
    alert("行间事件");
}

一句话搞定

那么移除事件就很简单了,一句代码搞定：

document.getElementById("btn").onclick = null;

或者使用jq的方法移除

$("#btn").prop("onclick",null);

或

$("#jb51").removeAttr("onclick"); 
$('.ul_Address li a').removeAttr("onclick");

若使用多种写法绑定多个click事件则移除所有的click事件：

 $("#btn").prop("onclick",null).off("click");

写法二、三、四的移除：

$("#btn").on("click",function(){
	alert("jquery使用on绑定事件");
})
$("#btn").click(function(){
	alert("jquery使用click绑定事件");
})
$("#btn").bind("click",function(){
	alert("jquery使用bind绑定事件");
})

直接使用unbind方法

$("#btn").unbind("click");

使用off方法

$("#btn").off("click");

写法五使用on绑定动态元素的移除：

这种写法使用unbind无效，因为它绑定的对象是父元素body，那么需要用配对的函数off移除

$("body").off("click","#btn");

需要注意的是：事件委托写法的解绑的元素需要与事件绑定的目标元素一致（即案例中body,#btn需要一一对应），否则不生效。
自 jQuery 版本 1.7 起，on() 方法是 bind()、live() 和 delegate() 方法的新的替代品；off() 方法是 unbind()、die() 和 undelegate() 方法的新的替代品。使用起来更方便，推荐使用。

其中关于off函数的参数说明如下：

/*如果不传参，会移除所有的事件*/
$("#btn").off();
/*如果传递一个参数，会移除这个类型的所有事件*/
$("#btn").off('click');
/*如果传递两个参数，则移除这两个参数指定的事件*/
$("#btn").off('click',test);

jQuery怎么删除点击事件？

要删除一个元素的点击事件，可以使用jQuery的off()方法，该方法用于解除元素绑定的事件。

以下是一个示例代码，其中包括了如何添加点击事件和如何删除点击事件：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>删除点击事件示例</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
  // 给按钮绑定一个点击事件
  $("#myBtn").on("click", function(){
    alert("Hello World!");
  });
  // 给删除按钮绑定一个点击事件
  $("#deleteBtn").on("click", function(){
    // 解除按钮的点击事件
    $("#myBtn").off("click");
  });
});
</script>
</head>
<body>
<button id="myBtn">点击我</button>
<button id="deleteBtn">删除点击事件</button>
</body>
</html>

在上面的代码中，首先使用on()方法给按钮绑定了一个点击事件，当用户点击按钮时，会弹出一个消息框。

然后，又使用on()方法给另一个按钮绑定了一个点击事件，当用户点击这个按钮时，会解除之前按钮的点击事件，从而实现了删除点击事件的效果。

到此这篇关于jquery中click等事件绑定及移除的几种方法小结的文章就介绍到这了,更多相关jqueryclick事件绑定及移除内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

JavaScript删除数组元素的方法指南
作为一名前端开发工程师，我们经常需要在 JavaScript 中操作数组，其中比较常见的操作便是对数组进行元素的添加、删除和修改。在这篇文章中，我会详细介绍JS中所有删除数组元素的方法，希望对大家有所帮助
2023-05-05
js实现查询商品案例
这篇文章主要为大家详细介绍了js实现查询商品案例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-07-07
JS实现拖动滚动条评分的效果代码分享
本文给大家基于js实现拖动滚动条评分效果，在项目开发中经常可以用到的，大家可以更加需要适当的添加修改，对js评分效果感兴趣的朋友一起看看吧
2016-09-09
纯Javascript实现ping功能的方法
这篇文章主要介绍了纯Javascript实现ping功能的方法,实例分析了javascript实现ping功能的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-03-03
uniapp制作一个收缩通讯录的实现代码
这篇文章主要介绍了uniapp制作一个收缩通讯录的实现代码,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
2023-12-12
Jquery+javascript实现支付网页数字键盘
这篇文章主要为大家详细介绍了Jquery+javascript实现支付网页数字键盘，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-12-12
基于layPage插件实现两种分页方式浅析
这篇文章主要为大家详细介绍了基于layPage插件实现两种分页方式，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-07-07
十个你必须要会的TypeScript技巧分享
学习Typescript通常是一个重新发现的过程。这篇文章为大家整理了十个你必须要会的TypeScript技巧，希望对大家学习TypeScript有所帮助
2023-06-06
关于JS与jQuery中的文档加载问题
本文通过实例代码给大家讲解了js和jquery中的文档加载问题，感兴趣的的朋友一起看看吧
2017-08-08
layer关闭当前窗口页面以及确认取消按钮的方法
今天小编就为大家分享一篇layer关闭当前窗口页面以及确认取消按钮的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-09-09