码迷,mamicode.com
首页 > Web开发 > 详细

jQuery 事件对象

时间:2014-12-11 17:07:32      阅读:225      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   io   ar   color   使用   sp   for   

JavaScript 在事件处理函数中默认传递了 event 对象,也就是事件对象。但由于浏览器 的兼容性,开发者总是会做兼容方面的处理。jQuery 在封装的时候,解决了这些问题,并且 还创建了一些非常好用的属性和方法

一.事件对象

事件对象就是 event 对象,通过处理函数默认传递接受。之前处理函数的 e 就是 event 事件对象,event 对象有很多可用的属性和方法,我们在 JavaScript 课程中已经详细的了解 过这些常用的属性和方法,这里,我们再演示一次。

//通过处理函数传递事件对象   
$(input).bind(click,function(e){   
    //接受事件对象参数   
    alert(e);   
});

bubuko.com,布布扣

bubuko.com,布布扣

//通过 event.type 属性获取触发事件名   
$(input).click(function(e){   
    alert(e.type);   
});  

//通过 event.target 获取绑定的 DOM 元素   
$(input).click(function(e){   
    alert(e.target);   
});  

//通过 event.data 获取额外数据,可以是数字、字符串、数组、对象   
$(input).bind(click,123,function(){ //传递 data 数据   
    alert(e.data); //获取数字数据   
});  

注意:如果字符串就传递:‘123‘、如果是数组就传递:[123,‘abc‘],如果是对象就传递: {user:‘Lee‘,age:100}。 数组的调用方式是:e.data[1],对象的调用方式是:e.data.user

//event.data 获取额外数据,对于封装的简写事件也可以使用   
$(input).click({user:Lee, age:100},function(e){   
    alert(e.data.user);   
});  

注意:键值对的键可以加上引号,也可以不加;在调用的时候也可以使用数组的方式: alert(e.data[‘user‘]);

//获取移入到 div 之前的那个 DOM 元素   
$(div).mouseover(function(e){   
    alert(e.relatedTarget);   
});  

//获取移出 div 之后到达最近的那个 DOM 元素   
$(div).mouseout(function(e){   
    alert(e.relatedTarget);   
});  

//获取绑定的那个 DOM 元素,相当于 this,区别与 event.target   
$(div).click(function(e){   
    alert(e.currentTarget);   
}); 

注意:event.target 得到的是触发元素的 DOM,event.currentTarget 得到的是监听元素的 DOM。而 this 也是得到监听元素的 DOM。

//获取上一次事件的返回值   
$(div).click(function(e){   
    return123;   
});
$(div).click(function(e){   
    alert(e.result);   
});  


//获取当前的时间戳   
$(div).click(function(e){   
    alert(e.timeStamp);   
});  

//获取鼠标的左中右键   
$(div).mousedown(function(e){  
    alert(e.which);   
});  

//获取键盘的按键   
$(input).keyup(function(e){   
    alert(e.which);   
});  

//获取是否按下了 ctrl 键,meta 键不存在,导致无法使用   
$(input).click(function(e){   
    alert(e.ctrlKey);   
});  

//获取触发元素鼠标当前的位置   
$(document).click(function(e){   
    alert(e.screenY+,+e.pageY+, +e.clientY);   
});  

二.冒泡和默认行为 

如果在页面中重叠了多个元素,并且重叠的这些元素都绑定了同一个事件,那么就会出现冒泡问题

//HTML 页面   
<div style="width:200px;height:200px;background:red;">   
    <input type="button"value="按钮"/>   
</div>  

//三个不同元素触发事件   
$(input).click(function(){  
    alert(按钮被触发了!);  
});  

$(div).click(function(){   
    alert(div 层被触发了!);   
});  

$(document).click(function(){   
    alert(文档页面被触发了!);   
});  

注意:当我们点击文档的时候,只触发文档事件;当我们点击 div 层时,触发了 div 和 文档两个;当我们点击按钮时,触发了按钮、div 和文档。触发的顺序是从小范围到大范围。 这就是所谓的冒泡现象,一层一层往上。

jQuery 提供了一个事件对象的方法:event.stopPropagation();这个方法设置到需要触发 的事件上时,所有上层的冒泡行为都将被取消。

$(input).click(function(e){   
    alert(按钮被触发了!);   
    e.stopPropagation();   
});

网页中的元素,在操作的时候会有自己的默认行为。比如:右击文本框输入区域,会弹 出系统菜单、点击超链接会跳转到指定页面、点击提交按钮会提交数据。

$(a).click(function(e){   
    e.preventDefault();   
});  

//禁止提交表单跳转   
$(form).submit(function(e){   
  e.preventDefault();   
});

注意:如果想让上面的超链接同时阻止默认行为且禁止冒泡行为,可以把两个方法同时 写上:event.stopPropagation()event.preventDefault()。这两个方法如果需要同时启用的时候, 还有一种简写方案代替,就是直接 return false

$(a).click(function(e){   
    return false;   
});

bubuko.com,布布扣

bubuko.com,布布扣

jQuery 事件对象

标签:style   blog   http   io   ar   color   使用   sp   for   

原文地址:http://www.cnblogs.com/Waiting-for-you/p/4154934.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!