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坐标，如果有滚动条，还要加上滚动条的宽度和高度。

 

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