jQuery（四）jQuery事件机制与JavaScript的区别-优快云博客

本文深入探讨了jQuery事件机制与JavaScript的区别，重点介绍了jQuery中的事件冒泡特性及其应用场景，包括事件冒泡的阻止方法、事件委托的高效利用以及如何模拟用户操作事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jQuery事件机制与JavaScript的区别

单独用一篇来讲这个标题肯定是不行的，但这个其实也是一个比较关键的地方。看过前面文章的同学应该都知道，对于JS而言事件的阶段有捕捉阶段和冒泡阶段。对于Jquery而言他只有冒泡阶段，这个地方是比较关键的地方。

体现冒泡阶段的一段jquery代码（js的请回看js系列）：

$(document).ready(function(){
	
	
	$('div').click(function(event){
	
				alert("div");
			
	});
	
	$('#mBtn').click(function(){
	
		alert("mBtn");
		event.stopPropagation();
	});
});

//html页面
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery.js" ></script>
		<script type="text/javascript" src="js/event.js" ></script>
	</head>
	<body>
		<div>
			<p>测试事件的冒泡<p>
			<input class="button" id="mBtn" type="button" value="maopao" />
			<a href="http://www.baidu.com">enen</a>
		</div>
	</body>
</html>

两种方式进行对冒泡事件的阻止，当然是有这个阻止的需求的前提哈。

1.借助event.target保留了发生事件的目标元素//js中也可以使用

$(document).ready(function(){
	//对外层加一个判断，function中必须带参数，不然用的就是全局的无法进行判断
	$('div').click(function(event){
			if(event.target==this){
				alert("div");
			}
	});
	
	$('#mBtn').click(function(){
	
		alert("mBtn");
	})
	
});

2.使用停止事件传播的方法

$(document).ready(function(){

	$('div').click(function(event){
	
		alert("div");
			
	});
	
    //使用全局event的停止事件传播方法
	$('#mBtn').click(function(){
	
		alert("mBtn");
		event.stopPropagation();
	});
	
});

下面会引入一个概念：默认操作，这个体系是和事件传播不同的。两者任意一个发生都会终止另一个，同时终止两个要return false；或者一起调用 stopPropagation();和.preventDefault();其实就解释了为什么我的js有一次必须要使用return false,才行。

事件委托：当为每一个按钮都注册一个事件的，如果是对一个表格内的所有按钮进行操作的话如果都注册事件，其实是一个极其浪费内存，影响性能的一件事情。一个很好的方式就是利用冒泡原理，将事件进行委托给最顶层的其中一个元素，其实我在js里面都已经有这个思想了，查看js实现开源中国IT技能页面的思想。代码如下：

function entrust(){
	$('body').click(function(event){
		if($(event.target).is('.button')){
			if(event.target.id=='mBtn'){
				alert('mBtn');
			}else{
				alert("error!");
			}
		}
		
	});
}

代码只对了一个按钮操作，你可以对更多的按钮进行操作，还是比较简单关键的就是event.target记录的点击事件的元素，包括了它的id，class,value值等属性。

模拟用户操作事件：jquery里面提供了两种方式,不带参数的使用简写方法，使用.trigger()方法

	$('#mBtn').click();
	$('#mBtn').trigger('click');

键盘事件：最关键的一个实践经验，用户按了哪个键，监听keyup或keydown，用户输入了什么字符，应该监听keypress事件(按下不放可以输入很多字符，有一个字符输入就除非事件)。这个地方就是最关键的地方。

	$(document).keyup(function(event){
		switch(String.fromCharCode(event.keyCode)){
			case 'D':
			   alert("DDDD!!!");break;
			case 'F':
			   alert("FFFF!!!");break;
		}
	});

转载于:https://my.oschina.net/QAAQ/blog/687491