jQuery|event的属性和方法

jQuery事件对象event的属性和方法

事件处理(事件对象、目标元素的获取,事件对象的属性、方法等)在不同浏览器之间存在差异,jQuery在遵循W3C规范的情况下做了封装统一

事件对象常用的属性:

event.type:获取事件的类型,触发元素的事件类型

$("a").click(function(event) {
alert(event.type); // "click"事件
});

event.pageX 和 event.pageY:获取鼠标当前相对于页面的坐标,可以确定元素在当前页面的坐标值,是以页面为参考点,不随滑动条移动而变化

$("a").click(function(event) {
alert("Current mouse position: " + event.pageX + ", " + event.pageY );
return false;
});

event.target:获取触发事件的元素

this和event.target的区别:

js中事件是会冒泡的,所以this是可以变化的,但event.target不会变化,它永远是直接接受事件的目标DOM元素;

this和event.target都是dom对象,可以转换为jquery对象:$(this)和$(event.target)

$("a[href=http://www.baidu.com]").click(function(event) {
alert(event.target.href);
return false;
});

event.which:获取在鼠标单击事件中鼠标的左、中、右键(左键1,中间键2,右键3),在键盘事件中键盘的键码值

$("a").mousedown(function(e){
alert(e.which);
return false;
})
event.currentTarget : 获取冒泡前的当前触发事件的DOM对象, 等同于this

事件对象常用的方法:

event.preventDefault() :

阻止默认行为,可以用 event.isDefaultPrevented() 来确定preventDefault是否被调用过了

event.stopPropagation() :

阻止事件冒泡,事件是可以冒泡的,为防止事件冒泡到DOM树上,不触发任何前辈元素上的事件处理函数,可以用 event.isPropagationStopped() 来确定stopPropagation是否被调用过了

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • (续jQuery基础(1)) 第5章 DOM节点的复制与替换 (1)DOM拷贝clone() 克隆节点是DOM的常...
    凛0_0阅读 1,363评论 0 8
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 1,367评论 0 2
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 1,200评论 0 1
  • 总结: 鼠标事件 1.click与dbclick事件$ele.click()$ele.click(handler(...
    阿r阿r阅读 1,631评论 2 10
  • 很多人抱怨生活单调、乏味,不知道改如何样改变自己的命运。看着别人一步步走向成功,除了羡慕嫉妒以外,对自己的人生会更...
    漫步者说事阅读 705评论 9 13