使用事件自然少不了事件对象. 因为不同浏览器之间事件对象的获取, 以及事件对象的属性都有差异, 导致我们很难跨浏览器使用事件对象.
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事件对象的函数列表:
名称 | 说明举例 |
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() ); }); |
某些事件可能有属性对他们特定。这些可以作为属性访问的event.originalEvent对象,来访问浏览器的属性
相关推荐
因为不同浏览器之间事件对象的获取, 以及事件对象的属性都有差异, 导致我们很难跨浏览器使用事件对象. jQuery中统一了事件对象, 当绑定事件处理函数时, 会将jQuery格式化后的事件对象作为唯一参数传入:$(“#test...
jQuery事件对象的属性和方法,供大家参考,具体内容如下 事件对象的属于与方法有很多,但是我们经常用的只有那么几个,这里我主要说下作用与区别 event.type:获取事件的类型 触发元素的事件类型 $("a").click...
9. **表单对象属性选择器**: - `:enabled` 和 `:disabled`:匹配启用或禁用的表单元素。 - `:checked` 和 `:selected`:匹配被选中的单选按钮、复选框和选项。 ### 二、jQuery对象与DOM对象 - **DOM对象**:...
4. **原型链和继承**: jQuery对象可以通过原型链实现继承,这样可以复用父类的方法和属性。使用`$.extend()`或`Object.create()`可以实现这一点,提高代码的复用性。 5. **封装**: 面向对象的核心思想之一就是封装...
可以使用jQuery来维护这些状态,例如将选中的属性值存储在DOM元素的data属性中,或者使用JavaScript对象来管理。 6. **动画效果**:为了提升用户体验,可以利用jQuery的动画功能来优雅地展示结果。例如,当用户更改...
在JavaScript中,DOM(Document Object Model)元素是网页结构的表示形式,而jQuery对象是对这些DOM元素的封装,提供了一组强大的方法和属性。jQuery对象集合则是一系列jQuery对象的组合,允许我们对一组元素执行...
而jQuery对象则是jQuery库中用于封装DOM对象的一个特殊类型,提供了一系列便捷的方法来处理DOM操作,如选择元素、事件绑定、动画效果等。 **DOM对象** DOM对象是JavaScript与网页内容交互的基础。当你通过...
ASP.NET团队最近还向jQuery社区提交了被称为“data linking”的技术,Data Linking可以帮助你实现对象与对象之间属性的关联——当其中一方发生改变时另一方也随之改变。方便的实现页面中展现的数据与实际数据对象中...
在本文中,我们将深入探讨jQuery的DOM对象事件处理、隐藏显示功能以及如何操作对象数组。jQuery作为一个广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理、动画和Ajax交互,使得Web开发更加便捷。 首先,让...
1. **浅拷贝**:当仅传递两个对象作为参数时,`jQuery.extend(target, source)`,`target` 对象将接收 `source` 的属性,但不会改变原始对象。如果 `source` 和 `target` 有相同的属性,`source` 的属性值会覆盖 `...
`jQuery.fn`和`jQuery.prototype`指向同一个对象,这使得所有jQuery对象都能够共享相同的方法和属性。其中`init`方法负责处理不同的`selector`参数,并返回一个包含所选元素的jQuery对象。 #### 四、处理不同的`...
本篇文章将深入探讨jQuery的基础知识,包括其基本介绍、使用步骤、jQuery对象与DOM对象的区别,以及jQuery的选择器。此外,我们还将讨论`mouseover`与`mouseenter`事件的区别、`index()`方法的用法以及如何区分...
当我们谈论jQuery对象和DOM对象时,我们需要理解两者之间的基本差异和转换方法。 DOM(Document Object Model)是HTML和XML文档的结构表示,允许我们通过JavaScript来访问和修改网页内容。DOM对象是通过JavaScript...
事件对象`event`中包含了滚轮事件的详细信息,如`deltaX`, `deltaY`, 和 `deltaZ`属性,分别表示水平、垂直和轴向的滚动量。这些值通常是负数(向下/向右滚动)或正数(向上/向左滚动)。你可以根据这些值来控制页面...
### 关于DOM与jQuery对象的理解 #### DOM简介 在探讨DOM与jQuery之间的关系之前,我们首先需要明确什么是DOM(Document Object Model)。DOM是一种用于表示HTML或XML文档的标准接口,它提供了一种方式来读取、操作...
在jQuery中,事件对象的属性和方法可以分为几类,主要包括事件类型、触发元素、目标元素、事件时间和事件状态等。 1. event.type属性用于获取触发事件的名称。例如,当点击一个按钮时,可以这样获取事件类型: ```...
### 六、事件对象的其他属性和方法 - `event.delegateTarget`: 事件委托的元素。 - `event.data`: 在事件处理函数中传递的额外数据。 - `event.isDefaultPrevented()`: 检查是否已调用`event.preventDefault()`。 -...