学习要点：
1.事件对象
2.冒泡和默认行为
JavaScript 在事件处理函数中默认传递了 event 对象。也就是事件对象。但由于浏览器 的兼容性。开发人员总是会做兼容方面的处理。
jQuery 在封装的时候。解决了这些问题，并且 还创建了一些很好用的属性和方法。
一．事件对象
事件对象就是 event 对象，通过处理函数默认传递接受。之前处理函数的 e 就是 event 事件对象，event 对象有非常多可用的属性和方法，我们在 JavaScript 课程中已经详细的了解 过这些经常使用的属性和方法。这里，我们再一次演示一下。
//通过处理函数传递事件对象
$(‘input‘).bind(‘click‘, function (e) { //接受事件对象參数
alert(e);
});
event 对象的属性
|
属性名 |
描述 |
|
type |
获取这个事件的事件类型。例如：click |
|
target |
获取绑定事件的 DOM 元素 |
|
data |
获取事件调用时的额外数据 |
|
relatedTarget |
获取移入移出目标点离开或进入的那个 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.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。
//获取上一次事件的返回值
$(‘div‘).click(function (e) {
return ‘123‘;
});
$(‘div‘).click(function (e) {
alert(e.result);
});
//获取当前的时间戳
$(‘div‘).click(function (e) {
alert(e.timeStamp);
});
//获取鼠标的左中右键
$(‘div‘).mousedown(function (e) {
alert(e.which);
});
//获取键盘的按键
$(‘input‘).keyup(function (e) {
alert(e.which);
});
//获取是否按下了 ctrl 键。meta 键不存在，导致无法使用
$(‘input‘).click(function (e) {
alert(e.ctrlKey);
});
//获取触发元素鼠标当前的位置
$(document).click(function (e) {
alert(e.screenY+ ‘,‘ + e.pageY + ‘,‘ + e.clientY);
});
二．冒泡和默认行为 如果在页面中重叠了多个元素，而且重叠的这些元素都绑定了同一个事件，那么就会出
现冒泡问题。
//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 和 文档两个；当我们点击button时，触发了button、div 和文档。触发的顺序是从小范围到大范围。
这就是所谓的冒泡现象，一层一层往上。
jQuery 提供了一个事件对象的方法：event.stopPropagation()；这个方法设置到需要触发 的事件上时，全部上层的冒泡行为都将被取消。
$(‘input‘).click(function (e) { alert(‘按钮被触发了。‘); e.stopPropagation();
});
网页中的元素。在操作的时候会有自己的默认行为。比如：右击文本框输入区域，会弹 出系统菜单、点击超链接会跳转到指定页面、点击提交button会提交数据。
$(‘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()方法 |
//判断是否取消了元素的默认行为
$(‘input‘).keyup(function (e) { e.preventDefault();alert(e.isDefaultPrevented());
});
//取消冒泡并取消后续事件处理函数
$(‘input‘).click(function (e) { alert(‘input‘);e.stopImmediatePropagation();
});
$(‘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());
});