首页 > js学习 > js基础知识 > jQuery中的事件对象、冒泡和默认行为
2016
12-16

jQuery中的事件对象、冒泡和默认行为

JavaScript在事件处理函数中默认传递了event对象,也就是事件对象。但由于浏览器的兼容性,开发者总是会做兼容方面的处理。jQuery 在封装的时候,解决了这些问题,并且还创建了一些非常好用的属性和方法。

一.事件对象

事件对象就是event对象,通过处理函数默认传递接受。之前处理函数的e 就是 event事件对象,event对象有很多可用的属性和方法

$('input').bind('click', function (e) {alert(e);});//通过处理函数的参数传递接受事件对象

event对象的属性:

type:获取这个事件的事件类型字符串,例如:click

target:获取绑定事件的DOM 元素

data:获取事件调用时的额外数据

relatedTarget:获取移入移出目标点离开或进入的那个DOM元素,进入时获取进去之前鼠标在哪个DOM,离开时获取鼠标离开该DOM后在哪个DOM

currentTarget:获取事件绑定触发的 DOM 元素,等同与 this

pageX/pageY:获取相对于页面原点的水平/垂直坐标

screenX/screenY:获取显示器屏幕位置的水平/垂直坐标(非jQuery 封装)

clientX/clientY:获取相对于页面视口的水平/垂直坐标(非jQuery 封装)

result:获取上一个相同事件的返回值

timeStamp:获取事件触发的时间戳

which:获取鼠标的左中右键(1,2,3),或获取键盘按键

altKey/shiftKey/ctrlKey/metaKey:获取是否按下了 alt、shift、ctrl(这三个非 jQuery 封装)或meta 键(IE 原生 meta 键,jQuery做了封装)

通过event.data获取额外数据,可以是数字、字符串、数组、对象

$('input').bind('click',123, function () {alert(e.data);}); //获取匿名函数第二个可选参数data的数据

data为数组时获取单一元素值可以e.data[索引值]

data为对象时获取单一元素值可以e.data.user或e.data['键']

event.target得到的是触发元素的DOM,如一个DIV中包含一个P,DIV有一个点击事件,点击P的区域获取的则是P的DOM元素

event.currentTarget得到的是绑定事件时的监听元素的DOM,上面例子中不管点哪个位置,都会得到DIV的DOM元素。而 this 也是得到监听元素的DOM。

$('div').click(function (e) {return '123';});

$('div').click(function (e) {alert(e.result);}); //获取上一个相同事件的返回值

二.冒泡和默认行为

如果在页面中重叠了多个元素,并且重叠的这些元素都绑定了同一个事件,那么就会出现冒泡问题。

<div style="width:200px;height:200px;">

<input type="button" value="按钮" />

</div>

//三个不同元素触发事件

$('input').click(function () {alert('按钮被触发了!');});

$('div').click(function () {alert('div 层被触发了!');});

$(document).click(function () {alert('文档页面被触发了!');});

当我们点击文档的时候,只触发文档事件;当我们点击div层时,触发了 div和文档两个;当我们点击按钮时,触发了按钮、div和文档。触发的顺序是从小范围到大范围。这就是所谓的冒泡现象,一层一层往上。

jQuery 提供了一个事件对象的方法:event.stopPropagation();这个方法设置到需要触发的事件上时,所有上层的冒泡行为都将被取消。

$('input').click(function (e) {alert('按钮被触发了!');e.stopPropagation();});

网页中的元素,在操作的时候会有自己的默认行为。比如:右击文本框输入区域,会弹出系统菜单、点击超链接会跳转到指定页面、点击提交按钮会提交数据。

$('a').click(function (e) {e.preventDefault();}); //禁止超链接默认跳转

$('form').submit(function (e) {e.preventDefault();}); //禁止默认提交表单

注意:如果想让上面的超链接同时阻止默认行为且禁止冒泡行为,可以把两个方法同时写上: event.stopPropagation()和event.preventDefault()。 这两个方法如果需要同时启用的时候,还有一种简写方案代替,就是直接return false。

$('a').click(function (e) {return false;});

冒泡和默认行为的一些方法:

preventDefault():取消某个元素的默认行为

isDefaultPrevented():判断是否调用了preventDefault()方法

stopPropagation():取消事件冒泡

isPropagationStopped():判断是否调用了stopPropagation()方法

stopImmediatePropagation():取消事件冒泡, 并取消该事件的后续事件处理函数

isImmediatePropagationStopped():判断是否调用了stopImmediatePropagation()方法

最后编辑:
作者:qingheluo
这个作者貌似有点懒,什么都没有留下。