jQuery在遵循W3C规范的情况下,对事件的常用属性进行了封装,使得事件处理在各大浏览器下都可以正常的运行而不需要进行浏览器类型判断。
1.event.type属性
该方法作用是可以获取到时间的类型
$("a").click(function(event){
alert(event.type); //获取时间类型
return false; //阻止链接跳转
})
以上代码运行后会返回:“click”。
2.event.preventDefault()方法
该方法的作用是阻止默认的事件行为。JavaScript中符合W3C规范的preventDefault()方法在IE浏览器中无效。jQuery对其进行了封装,使之能兼容各种浏览器。
3.event.stopPropagation()方法
该方法是阻止事件的冒泡。JavaScript中符合W3C规范的stopPropagation()方法在IE浏览器中无效。jQuery对其进行封装,使之能兼容各种浏览器。
4.event.target属性
event.target属性的作用是获取到出发事件的元素。jQuery对其封装后,避免了W3C、IE和safari浏览器不同标准的差异。
$("a[href=http://www.w3cmm.com]").click(function(event){
alert(event.target.href); //获取触发事件的<a>元素的href属性值
return false; //阻止链接跳转
})
5.event.relatedTarget属性
在标准DOM中,mouseover和mouseout所发生的元素可以通过event.target()方法来访问,相关元素是通过event.relatedTarget属性来访问的。event.relatedTarget属性在mouseover中相当于IE浏览器的event.fromElement属性,在mouseout中相当于IE浏览器的event.toElement,jQuery对其进行了封装,使之能兼容各种浏览器。
6.event.pageX/event.pageY属性
该方法的作用是获取到光标相对页面的x坐标和y坐标。如果没有使用jQuery时,那么IE浏览器中是用event/event.y方法,而在Firefox浏览器中用event.pageX/event.pageY方法。如果页上有滚动条,则还要加上滚动条的宽度和高度。在IE浏览器中还应该减去默认的2px的边框。
$(function() {
$("a").click(function(event) {
alert("Current mouse position:" + event.pageX + "," + event.pageY);
//获取鼠标当前相对于页面的坐标
return false; //阻止链接跳转
});
})
7.event.which属性
该方法的作用是在鼠标单击事件中获取到鼠标的左、中、右键;在键盘事件中获取键盘的按钮。
$(function() {
$("body").mousedown(function(e) {
alert(e.which); //1 = 鼠标左键;2 = 鼠标中键;3 = 鼠标右键。
})
})
以上代码加载到页面中,用鼠标单击页面时,单击左、中、右键分别返回1、2、3.
8.event.metaKey属性
针对不同浏览器对键盘中的<ctrl>按键解释不同,jQuery也进行了封装,并规定event.metaKey()方法为键盘事件中获取<ctrl>按键。
9.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()`。 -...