jQuery事件对象的属性

1.什么是事件对象?

即将触发的事件作为一个对象处理,对于事件对象,我们需要有以下几个方面的理解:

$('div').click(function(event){
  $(this).css('backgroundColor', red);
})

1)当事件触发时,事件对象就被创建了。上面的代码中当<div>被单击时,事件对象就被创建了。

2)这个事件对象,只有事件处理函数能访问到。事件处理函数执行完毕,事件对象就被销毁。

3)在程序中使用事件对象非常简单,只需要为函数添加参数event即可。

 

那么怎么来使用好这个事件对象呢?  下面我们来介绍一下常用的事件对象的属性

2.事件对象的属性有哪些?

1)event.type    

     用于获取事件对象的类型

$('div').click(function(event){
  alert(event.type);
})

 运行后则会输出:click

2)event.preventDefault();

     用于阻止默认事件触发

$('a').click(function(event){
  $(this).css('backgroundColor', red);
  event.preventDefault();
})

 我们都知道,点击超链接标签<a>之后默认会打开一个新的网页窗口,event.preventDefault()可以阻止这个默认行为的发生。

3)event.preventPropagation();

      用于阻止冒泡事件

      冒泡事件会引发的一个问题是,当我们通过某元素触发一个事件时,该元素的上级元素事件也被触发了,即目标之外的事件被触发了,event.preventPropagation()可以阻止冒泡事件的发生

注意:return false; 同时阻止了默认事件和冒泡事件,这是常用的一条语句哟。

4)event.targrt

      获取到触发事件的元素

$('div').click(function(event){
  $(this).css('backgroundColor', red);
  alert(event.target);
})

输出结果为:$('div');

5)event.pageX和event.pageY

   获取光标相对于页面的x坐标和y坐标,如果有滚动条,还要加上滚动条的宽度和高度。

 

本博客为作者原创,如需转载请注明出处!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值