19-Javaweb学习-事件对象-event的属性、冒泡和默认行为

19-Javaweb学习-事件对象-event的属性、冒泡和默认行为

事件对象

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

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

1.事件对象event的属性

属性名	描述
type	获取这个事件的事件类型，例如：click
target	event.target 得到的是触发元素的 DOM对象 比如一个子层,在外层里面,给外层绑定了事件 那么你移入到子层,子层也能触发这个事件,那么event.targe获取到的是这个子层对象,因为他是触发事件的对象
currentTarget	currentTarget 得到的是监听元素的DOM对象,等同与 this e. currentTarget 获取到的是,谁绑定的事件,那就是谁
relatedTarget	获取移入移出目标点,离开或进入的那个 DOM 元素
data	获取事件调用时的额外数据
which	获取鼠标的左中右键(1,2,3)，或获取键盘按键
timeStamp	获取事件触发的时间戳(当前时间的毫秒值)

//通过 event.type 属性获取触发事件名
$('input').click(function (e) {
	alert(e.type);
});

//通过 event.target 获取绑定的 DOM 元素
$('input').click(function (e) {
	alert(e.target);
});

//通过 event.data 获取额外数据，可以是数字、字符串、数组、对象
$('input').bind('click', 123, function () { //传递 data 数据
	alert(e.data); //获取数字数据
});

注意：如果字符串就传递：'123'、如果是数组就传递：[123,'abc']，如果是对象就传递：

{user : 'Lee', age : 100}。数组的调用方式是：e.data[1]，对象的调用方式是：e.data.user。

//event.data 获取额外数据，对于封装的简写事件也可以使用
$('input').click({user : 'Lee', age : 100},function (e) {
	alert(e.data.user);
});

注意：键值对的键可以加上引号，也可以不加；在调用的时候也可以使用数组的方式：
alert(e.data['user']);//获取移入到 div 之前的那个 DOM 元素
$('div').mouseover(function (e) {
	alert(e.relatedTarget);
});

//获取移出 div 之后到达最近的那个 DOM 元素

$('div').mouseout(function (e) {
	alert(e.relatedTarget);
});

//获取绑定的那个 DOM 元素，相当于 this，区别与 event.target
$('div').click(function (e) {
	alert(e.currentTarget);
});

注意：event.target 得到的是触发元素的 DOM，event.currentTarget 得到的是监听元素的DOM。而 this 也是得到监听元素的 DOM。

2.事件之冒泡和默认行为

​ 冒泡行为:页面中重叠了多个元素，并且重叠的这些元素都绑定了同一个事件，那么就会出现冒泡问题。

​ 给 A B C三个元素都设置了点击事件,那么当我点击C时 ,C,B,A 依次都会执行各自的点击事件,这种现象,称之为冒泡行为

​ 默认行为:一些元素本身就具有的行为,比如 a 标签的页面跳转行为 提交按钮的 提交表单行为,就是默认行为.

3.冒泡行为和默认行为的阻止和取消

​ 有时候,我们是想阻止掉这种冒泡行为,或者我们想阻止元素的默认行为,那Jquery封装了一些方法.

preventDefault()	取消某个元素的默认行为
stopPropagation()	取消事件冒泡
isDefaultPrevented()	判断是否调用了 preventDefault()方法
isPropagationStopped()	判断是否调用了 stopPropagation()方法
stopImmediatePropagation()	取消事件冒泡，并取消该事件的后续事件处理函数
isImmediatePropagationStopped()	判断是否调用了 stopImmediatePropagation()方法

//HTML 页面
<div style="width:200px;height:200px;background:red;">
	<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;
}

//判断是否取消了元素的默认行为
$(‘input’).keyup(function (e) {
	e.preventDefault();
	alert(e.isDefaultPrevented());
});

//取消冒泡并取消后续事件处理函数
$(‘input’).click(function (e) {
	alert(‘input’);
	e.stopImmediatePropagation();//阻止了冒泡行为,然后input后面绑定的事件也不执行了
});

$(‘input’).click(function () {//这里也就不执行了,因为上面取消了冒泡,还阻止了这后续事件
	alert('input2'); 
});

$(document).click(function () {
	alert('document');
});

//判断是否调用了 stopPropagation()方法
$('input').click(function (e) {
	e.stopPropagation();
	alert(e.isPropagationStopped());
});

//判断是否执行了 stopImmediatePropagation()方法
$('input').click(function (e) {
	e.stopImmediatePropagation();
	alert(e.isImmediatePropagationStopped());
});