jquery 事件对象属性小结

使用事件自然少不了事件对象.  因为不同浏览器之间事件对象的获取, 以及事件对象的属性都有差异, 导致我们很难跨浏览器使用事件对象.

jQuery中统一了事件对象,  当绑定事件处理函数时,  会将jQuery格式化后的事件对象作为唯一参数传入:

$("#testDiv").bind("click", function(event) { });

关于event对象的详细说明, 可以参考jQuery官方文档: http://docs.jquery.com/Events/jQuery.Event

jQuery事件对象将不同浏览器的差异进行了合并, 比如可以在所有浏览器中通过 event.target 属性来获取事件的触发者(在IE中使用原生的事件对象, 需要访问event.srcElement).

下面是jQuery事件对象可以在扩浏览器支持的属性:





























属性名称 描述举例
type 事件类型.如果使用一个事件处理函数来处理多个事件, 可以使用此属性获得事件类型,比如click. 
$("a").click(function(event) {

alert(event.type);

});
target 获取事件触发者DOM对象 
$("a[href=http://google.com]").click(function(event) {

alert(event.target.href);

});
data 事件调用时传入额外参数. 
$("a").each(function(i) {

$(this).bind('click', {index:i}, function(e){

alert('my index is ' + e.data.index);

});

});
relatedTarget 对于鼠标事件, 标示触发事件时离开或者进入的DOM元素 
$("a").mouseout(function(event) {

alert(event.relatedTarget);

});
currentTarget 冒泡前的当前触发事件的DOM对象, 等同于this. 
$("p").click(function(event) {

alert( event.currentTarget.nodeName );

});

结果:P

pageX/Y 鼠标事件中, 事件相对于页面原点的水平/垂直坐标. 
$("a").click(function(event) {

alert("Current mouse position: " + event.pageX + ", " + event.pageY );

});
result 上一个事件处理函数返回的值 
$("p").click(function(event) {

return "hey"

});

$("p").click(function(event) {

alert( event.result );

});

结果:”hey”

timeStamp 事件发生时的时间戳. 
var last;

$("p").click(function(event) {

if( last )

alert( "time since last event " + event.timeStamp - last );

last = event.timeStamp;

});

上面是jQuery官方文档中提供的event对象的属性. 在”jQuery实战”一书中还提供了下面的多浏览器支持的属性, 时间关系我没有尝试每一个属性, 大家可以帮忙验证是否在所有浏览器下可用:


























属性名称 描述
altKey Alt键是否被按下. 按下返回true
ctrlKey ctrl键是否被按下, 按下返回true
metaKey Meta键是否被按下, 按下返回true.
meta键就是PC机器的Ctrl键,或者Mac机器上面的Command键
shiftKey Shift键是否被按下, 按下返回true
keyCode 对于keyup和keydown事件返回被按下的键. 不区分大小写, a和A都返回65.对于keypress事件请使用which属性, 因为which属性跨浏览时依然可靠.
which 对于键盘事件, 返回触发事件的键的数字编码. 对于鼠标事件, 返回鼠标按键号(1左,2中,3右).
screenX/Y 对于鼠标事件, 获取事件相对于屏幕原点的水平/垂直坐标

事件对象除了拥有属性, 还拥有事件. 有一些是一定会用到的事件比如取消冒泡 stopPropagation() 等.下面是jQuery事件对象的函数列表:























名称 说明举例
preventDefault() 取消可能引起任何语意操作的事件. 比如<a>元素的href链接加载, 表单提交以及click引起复选框的状态切换. 
$("a").click(function(event){

event.preventDefault();

// do something

});
isDefaultPrevented() 是否调用过
preventDefault()

方法

$("a").click(function(event){

alert( event.isDefaultPrevented() );

event.preventDefault();

alert( event.isDefaultPrevented() );

});
stopPropagation() 取消事件冒泡 
$("p").click(function(event){

event.stopPropagation();

// do something

});
isPropagationStopped() 是否调用过
stopPropagation()

方法

$("p").click(function(event){

alert( event.isPropagationStopped() );

event.stopPropagation();

alert( event.isPropagationStopped() );

});
stopImmediatePropagation() 取消执行其他的事件处理函数并取消事件冒泡.如果同一个事件绑定了多个事件处理函数, 在其中一个事件处理函数中调用此方法后将不会继续调用其他的事件处理函数. 
$("p").click(function(event){

event.stopImmediatePropagation();

});

$("p").click(function(event){

// This function won't be executed

});
isImmediatePropagationStopped() 是否调用过
stopImmediatePropagation()

方法

$("p").click(function(event){

alert( event.isImmediatePropagationStopped() );

event.stopImmediatePropagation();

alert( event.isImmediatePropagationStopped() );

});

这些函数中  stopPropagation()  是我们最长用的也是一定会用到的函数. 相当于操作原始event对象的event.cancelBubble=true来取消冒泡.

赞 (0)

相关推荐

  • jQuery中事件对象e的事件冒泡用法示例介绍

    之前查手册的时候没有看到有事件对象这一概念,当时我想实现的是点击一个文本框出现一个下拉多选框,在文本框失去焦点是触发blur事件,从而使下拉框隐藏起来.但是当我要选择多选框是也会使它隐藏,就不能进行选择了,这让我很郁闷.查了一天的资料,终于在脱离了焦点这一块.在网上发现有一个事件冒泡的东西,发现通过点击可以实现我的这一功能. e.stopPropagation()阻止事件冒泡 复制代码 代码如下: <head> <title></title> <script sr

  • 从零开始学习jQuery (五) jquery事件与事件对象

    从零开始学习jQuery (五) jquery事件与事件对象

    一.摘要 事件是脚本编程的灵魂. 所以本章内容也是jQuery学习的重点. 本文将对jQuery中的事件处理以及事件对象进行详细的讲解. 二.前言 本篇文章是至今为止本系列内容最多的一篇, 足以可见其重要性.  大家反映要多列举示例. 我会在时间允许的情况下尽量多列举示例. 真正的投入生产使用的实例暂时还无法加入到文章中, 但是可能最后我会列举一些作品供大家借鉴. 另外本人水平有限, 因为我不是UI设计师. 文章可能有错误的地方, 希望大家帮忙指出, 一起学习一起进步. 在技术的世界里我们是没有

  • 读jQuery之八 包装事件对象

    比如,停止事件冒泡IE用 cancelBubble ,标准浏览器则用 stopPropagation . 获取事件源对象,IE用 srcElement ,标准浏览器则用 target 诸如此类. jQuery 对原生事件对象的修复和包装主要使用 jQuery.Event 类和 jQuery.event.fix 方法. 复制代码 代码如下: jQuery.Event = function( src ) { // Allow instantiation without the 'new' keywo

  • jQuery事件对象总结

    本人对jquery的event不懂,搜索了很多关于jquery event事件介绍,下面我来记录一下,有需要了解jquery event事件用法的朋友可参考.希望此文章对各位有所帮助. 学习要点: 事件对象 冒泡和阻止默认行为 一.事件对象 在JS中,我们已经详细讨论了JS的事件对象,这里就挑几个常用的探讨 <code class=" hljs xml"></code><div><code class=" hljs xml"

  • jQuery事件对象的属性和方法详解

    jQuery事件对象的属性和方法详解

    jQuery事件对象的属性和方法,供大家参考,具体内容如下 事件对象的属于与方法有很多,但是我们经常用的只有那么几个,这里我主要说下作用与区别 event.type:获取事件的类型 触发元素的事件类型 $("a").click(function(event) { alert(event.type); // "click"事件 }); event.pageX 和 event.pageY:获取鼠标当前相对于页面的坐标 通过这2个属性,可以确定元素在当前页面的坐标值,鼠标

  • jquery 事件对象属性小结

    使用事件自然少不了事件对象.  因为不同浏览器之间事件对象的获取, 以及事件对象的属性都有差异, 导致我们很难跨浏览器使用事件对象. jQuery中统一了事件对象,  当绑定事件处理函数时,  会将jQuery格式化后的事件对象作为唯一参数传入: $("#testDiv").bind("click", function(event) { }); 关于event对象的详细说明, 可以参考jQuery官方文档: http://docs.jquery.com/Events

  • Jquery中Event对象属性小结

    JS的Event对象是触发事件的时候传递给事件处理函数的一个对象,这个对象中存在触发事件的基本信息.如:触发事件的事件源.键盘码(如果存在)等基本信息. 1.通过event.type获取事件的类型 复制代码 代码如下: <script> $(function(){     $("a").click(function(event) {       alert(event.type);//获取事件类型       //return false;//阻止链接跳转       ev

  • JavaScript事件对象event用法分析

    本文实例讲述了JavaScript事件对象event用法.分享给大家供大家参考,具体如下: 前面的文章已经介绍了JavaScript为事件指定处理程序的五种方式. 下面继续介绍JavaScript的事件对象event. 事件对象event包含导致事件的元素.事件的类型以及其他与特定事件相关的信息. 1.DOM中的事件对象 属性/方法 类型 说明 bubbles Boolean 表明事件是否冒泡 cancelabel Boolean 表明是否可以取消事件的默认行为 currentTarget El

  • jquery中event对象属性与方法小结

    JQuery读书笔记–Event属性说明 JQuery事件中的Event属性是经常性的被忽略的.大多数时间你的确不怎么用它,但有些时候它还是它还是有作用的.如获知触发时用户的环境(是否按了shift etc).每个浏览器对event都有不同的地方,Jquery对Event做了标准化所以可以放心用. * .target  这个反应触发事件的DOM对象,可以在事件冒泡的时候判断是否是事件源头(compare event.target to this) * .pageX:  鼠标的left属性,相对于

  • JQuery中的常用事件、对象属性与使用方法分析

    本文实例讲述了JQuery中的常用事件.对象属性与使用方法.分享给大家供大家参考,具体如下: JQuery中的常用事件 .click() 鼠标单击触发事件,参数可选(data,function) .dblclick() 双击触发,同上 .mousedown()/up() 鼠标按下/弹起触发事件 .mousemove() 鼠标移动事件 .mouseover()/out() 鼠标移入/移出触发事件 .mouseenter()/leave() 鼠标进入/离开触发事件* .hover(func1,fun

  • JavaScript事件学习小结（三）js事件对象

    相关阅读: JavaScript事件学习小结(五)js中事件类型之鼠标事件 http://www.jb51.net/article/86259.htm JavaScript事件学习小结(一)事件流 http://www.jb51.net/article/86261.htm javaScript事件学习小结(四)event的公共成员(属性和方法) http://www.jb51.net/article/86262.htm JavaScript事件学习小结(二)js事件处理程序 http://www

随机推荐