您的位置：首页 > Web前端 > JQuery

jQuery（四）jQuery事件机制与JavaScript的区别

2016-06-06 00:00 453 查看

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;
}
});

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航