第一百七十节，jQuery，事件对象，event 对象，默认行为，冒泡
jQuery，事件对象，event 对象，默认行为，冒泡
学习要点：
1.事件对象
2.冒泡和默认行为
JavaScript 在事件处理函数中默认传递了 event 对象，也就是事件对象。但由于浏览器 的兼容性，开发者总是会做兼容方面的处理。jQuery 在封装的时候，解决了这些问题，并且 还创建了一些非常好用的属性和方法。
一．事件对象
事件对象就是 event 对象，通过处理函数默认传递接受。之前处理函数的 e 就是 event 事件对象，event 对象有很多可用的属性和方法，我们在 JavaScript 课程中已经详细的了解 过这些常用的属性和方法，这里，我们再一次演示一下。
通过处理函数传递事件对象
//通过处理函数传递事件对象 $('input').bind('click', function (e) { //接受事件对象参数 alert(e); });
type 属性获取这个事件的事件类型，例如：click
$('div').click(function (e) {
alert(e.type); //打印click
});
target 属性获取触发事件的 DOM 元素，就是触发元素的节点，比如，div下还有一个p，而div做了点击事件，点击div时得到的div节点，点击p时得到的p节点，适应冒泡规则
$('div').click(function (e) {
alert(e.target); //打印[object HTMLDivElement]
});
data 属性获取事件调用时的额外数据，也就是可在事件函数里以形式参数的方式传参，用data来接收，额外数据，可以是数字、字符串、数组、对象
$('div').bind('click',123456,function (e) {
alert(e.data); //打印 123456
});
注意：如果字符串就传递：'123'、如果是数组就传递：[123,'abc']，如果是对象就传递： {user : 'Lee', age : 100}。数组的调用方式是：e.data[1]，对象的调用方式是：e.data.user。
relatedTarget 属性获取移入移出目标点离开或进入的那个 DOM 元素，也就是鼠标移入或者移出时，鼠标经过路径中距离事件元素最近的节点
$('span').bind('mouseover',function (e) {
alert(e.relatedTarget); //打印 鼠标经过路径中距离事件元素最近的节点
});
currentTarget 属性获取冒泡前触发的 DOM 元素，等同与 this，得到的监听元素的节点，也就是绑定事件的元素节点，不适应冒泡规则
$('div').click(function (e) {
alert(e.currentTarget); //打印[object HTMLDivElement]
});
pageX 属性获取相对于页面原点的水平坐标，也就是网页左边起始位置与鼠标的位置
$('div').bind('click',function (e) {
alert(e.screenX); //打印 网页左边起始位置与鼠标的位置
});
pageY 属性获取相对于页面原点的垂直坐标，也就是网页头部起始位置与鼠标的位置
$('div').bind('click',function (e) {
alert(e.screenY); //打印 也就是网页头部起始位置与鼠标的位置
});
screenX 属性获取显示器屏幕位置的水平坐标(非 jQuery 封装)，也就是显示器视口左边位置与鼠标的位置
$('div').bind('click',function (e) {
alert(e.screenX); //打印 也就是显示器视口左边位置与鼠标的位置
});
screenY 属性获取显示器屏幕位置的垂直坐标(非 jQuery 封装)，也就是显示器视口头部位置与鼠标的位置
$('div').bind('click',function (e) {
alert(e.screenY); //打印 也就是显示器视口头部位置与鼠标的位置
});
clientX 属性获取相对于页面视口的水平坐标(非 jQuery 封装)，也就是浏览器视口左边位置与鼠标的位置
$('div').bind('click',function (e) {
alert(e.clientX); //打印 也就是浏览器视口左边位置与鼠标的位置
});
clientY 属性获取相对于页面视口的垂直坐标(非 jQuery 封装)，也就是浏览器视口头部位置与鼠标的位置
$('div').bind('click',function (e) {
alert(e.clientY); //打印 也就是浏览器视口头部位置与鼠标的位置
});
result 属性获取上一个相同事件的返回值
$('div').bind('click',function () {
return 123;
});
$('div').bind('click',function (e) {
alert(e.result); //打印 属性获取上一个相同事件的返回值123
});
timeStamp 属性获取事件触发的时间戳
$('div').bind('click',function (e) {
alert(e.timeStamp); //打印 属性获取事件触发的时间戳,387015390
});
which 属性获取鼠标的左中右键(1,2,3)，或获取键盘按键返回键码
$('input').bind('mousedown',function (e) {
alert(e.which); //打印 属性获取鼠标的左中右键(1,2,3)
});
$('input').bind('keyup',function (e) {
alert(e.which); //打印 取键盘按键,返回键码
});
altKey 属性获取是否按下了alt键
$('input').bind('click',function (e) {
alert(e.altKey); //打印 属性获取是否按下了alt键
});
shiftKey 属性获取是否按下了shift键
$('input').bind('click',function (e) {
alert(e.shiftKey); //打印 属性获取是否按下了shift键
});
ctrlKey 属性获取是否按下了ctrl键
$('input').bind('click',function (e) {
alert(e.ctrlKey); //打印 属性获取是否按下了ctrl键
});
metaKey 属性获取是否按下了meta键
获取是否按下了 alt、shift、ctrl(这三个非 jQuery 封装)或
meta 键(IE 原生 meta 键，jQuery 做了封装)
二．冒泡和默认行为
如果在页面中重叠了多个元素，并且重叠的这些元素都绑定了同一个事件，那么就会出 现冒泡问题。
冒泡说明
html
<div style="width:200px;height:200px;background:red;"> <input type="button" value="按钮"/> </div>
如果3个元素都需要绑定点击事件，这时点击最里面的input，就会产生冒泡行为，外围的元素都会被触发
//如果3个元素都需要绑定点击事件，这时点击最里面的input，就会产生冒泡行为，外围的元素都会被触发 $('input').bind('click',function () { alert('点击input'); //打印 }); $('div').bind('click',function () { alert('点击div'); //打印 }); $(document).bind('click',function () { alert('点击document'); //打印 });
注意：当我们点击文档的时候，只触发文档事件；当我们点击 div 层时，触发了 div 和 文档两个；当我们点击按钮时，触发了按钮、div 和文档。触发的顺序是从小范围到大范围。 这就是所谓的冒泡现象，一层一层往上。
jQuery 提供了一个事件对象的方法：event.stopPropagation()；这个方法设置到需要触发 的事件上时，所有上层的冒泡行为都将被取消。
stopPropagation()取消事件冒泡行为
$('input').bind('click',function (e) {
alert('点击input'); //打印
e.stopPropagation(); //取消冒泡行为
});
$('div').bind('click',function (e) {
alert('点击div'); //打印
e.stopPropagation(); //取消冒泡行为
});
$(document).bind('click',function () {
alert('点击document'); //打印
});
默认行为
网页中的元素，在操作的时候会有自己的默认行为。比如：右击文本框输入区域，会弹 出系统菜单、点击超链接会跳转到指定页面、点击提交按钮会提交数据。
preventDefault()阻止元素的默认行为
$('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() 取消某个元素的默认行为
$('a').click(function (e) {
e.preventDefault(); //阻止默认行为后超链接点击后无法跳转
});
isDefaultPrevented() 判断是否调用了 preventDefault()方法
//判断是否取消了元素的默认行为 $('input').keyup(function (e) { e.preventDefault(); alert(e.isDefaultPrevented()); });
stopPropagation() 取消事件冒泡
$('input').bind('click',function (e) {
alert('点击input'); //打印
e.stopPropagation(); //取消冒泡行为
});
isPropagationStopped() 判断是否调用了 stopPropagation()方法
//判断是否调用了 stopPropagation()方法 $('input').click(function (e) { e.stopPropagation(); alert(e.isPropagationStopped()); });
stopImmediatePropagation() 取消事件冒泡，并取消该事件的后续事件处理函数
//取消冒泡并取消后续事件处理函数 $('input').click(function (e) { alert('input'); e.stopImmediatePropagation(); //取消冒泡并取消后续事件处理函数 }); $('input').click(function () { //这里属于后续事件，将不执行了 alert('input2'); }); $(document).click(function () { alert('document'); });
isImmediatePropagationStopped() 判断是否调用了 stopImmediatePropagation()方法
//判断是否执行了 stopImmediatePropagation()方法 $('input').click(function (e) { e.stopImmediatePropagation(); alert(e.isImmediatePropagationStopped()); });
