JavaScript-绑定事件的三种方式（原生方式和bind方法）

最新推荐文章于 2025-06-24 16:00:39 发布

原创最新推荐文章于 2025-06-24 16:00:39 发布 · 4.7k 阅读

11 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#JavaScipt #JQuery #事件绑定 #bind #click

前端专栏收录该内容

20 篇文章

订阅专栏

博客介绍了事件绑定的三种方式。一是直接在标签中绑定；二是用JavaScript对象绑定，包括原生代码和JQuery转JavaScript对象实现；三是用JQuery对象绑定，如click和bind方法，bind可绑定一个或多个事件，还介绍了用unbing方法取消绑定。

事件绑定的三种方式

第一种
- 直接在标签中绑定事件
第二种
- 1. 原生JavaScript代码实现
- 2. 使用JQuery对象转换成JavaScript对象实现
第三种

第一种

直接在标签中绑定事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
	<script>
		function test() {
			alert("delete");
		}
	</script>
	<body>
		<a href="#" onclick="test()">删除</a>	
	</body>
</html>

结果

第二种

使用JavaScript对象绑定事件

1. 原生JavaScript代码实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
	<body>
		<a id="deleteA" href="#">删除</a>
	</body>
	<script>
		document.getElementById("deleteA").onclick = function() {
			alert("删除");
		}
	</script>
</html>

2. 使用JQuery对象转换成JavaScript对象实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
	<body>
		<a href="#">删除</a>
	</body>
	<script>
		//将JQuery对象转换成JavaScript对象
		$("[href]")[0].onclick = function() {
			alert("删除");
		}
	</script>
</html>

第三种

使用JQuery对象绑定事件

1.使用click方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
	<body>
		<a href="#">删除</a>
	</body>
	<script>
		$("[href='#']").click(function() {
			alert("JQuery");
		})
</script>
</html>

效果

2.使用bind方法

a.绑定一个事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
	<body>
		<a href="#">删除</a>
		
	</body>
	<script>
		$("[href='#']").bind("click",function(){
			alert("JQuery bind");
		})
</script>
</html>

效果

b.绑定多个事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
	<body>
		<a href="#">删除</a>
		
	</body>
	<script>
		$("[href ='#']").bind({
			click:function(){
				alert("事件一");
			},
			mouseover:function() {
				alert("事件二");
			}
		})
</script>
</html>

鼠标移动到标签上的时候的效果

按下空格，然后点击删除的效果

取消绑定事件

使用JQuery对象的unbing方法即可

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
	<body>
		<a href="#">删除</a>
	</body>
	<script>
		$("[href='#']").bind("click",function(){
			alert("JQuery bind");
			$("[href ='#']").unbind();
		})
</script>
</html>