共计 3094 个字符，预计需要花费 8 分钟才能阅读完成。
对于原生事件对象，因为浏览器的差别，开发者总是须要做兼容性的解决；为了解决这个问题，jquery 封装了本人的事件对象，解决了原生事件对象的兼容性问题，还另外提供了很多新的属性和办法。
内容提纲：
1. 事件对象
2. 冒泡和默认行为
JavaScript 在事件处理函数中默认传递了 event 对象，也就是事件对象。但因为浏览器的兼容性，开发者总是会做兼容方面的解决。jQuery 在封装的时候，解决了这些问题，并且还创立了一些十分好用的属性和办法。
一．事件对象
事件对象就是 event 对象，通过处理函数默认传递承受。之前处理函数的 e 就是 event 事件对象，event 对象有很多可用的属性和办法，详见 JavaScript 根底篇。
挪动端 touchEvent 事件，在 Jquery 被封装在 originalEvent 属性中，调用办法，例如：e.originalEvent.touches[0].clientX;
起因：js 事件有很多种：
鼠标事件：mouseEvent
触摸与手势事件：touchEvent
焦点事件：FocusEvent
键盘事件：keyboardEvent
等等，还有很多事件类型。在 jquery 中不同的事件类型被指向新的属性 originalEvent 中，即 originalEvent:touchEvent, 所以拜访 touchEvent 中的属性，须要后面加一个 originalEvent, 例如 e.originalEvent.touches[0].clientX
对其中的几个进行阐明：
// 通过 event.type 属性获取触发事件名
$(‘input’).click(function (e) {
alert(e.type);
});
// 通过 event.data 获取额定数据，能够是数字、字符串、数组、对象
$(‘input’).bind(‘click’, 123, function () { // 传递 data 数据
alert(e.data); // 获取数字数据 123
});
留神：如果字符串就传递：’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);
});
PS：键值对的键能够加上引号，也能够不加；在调用的时候也能够应用数组的形式：alert(e.data[‘user’]);
区别：target，currentTarget，relatedTarget：
// 通过 event.target 获取触发事件的 DOM 元素
$(‘input’).click(function (e) {
alert(e.target);
});
//relatedTarget 获取邻近元素
// 获取移入到 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);
});
PS：event.target 失去的是触发元素（比方点击事件，即具体点击的那个元素）的 DOM，event.currentTarget 失去的是监听元素（即绑定的那个元素）的 DOM。相当于 this，this 也是失去监听元素的 DOM。
//result 获取上一次雷同事件的返回值
$(‘div’).click(function (e) {
return ‘123’;
});
$(‘div’).click(function (e) {
alert(e.result);
});
//which 获取鼠标的左中右键
$(‘div’).mousedown(function (e) {
alert(e.which);
});
//which 获取键盘的按键
$(‘input’).keyup(function (e) {
alert(e.which);
});
// 获取触发元素鼠标以后的地位
$(document).click(function (e) {
alert(e.screenY+ ‘,’ + e.pageY + ‘,’ + e.clientY);
});
PS：pageX 和 pageY 获取的是间隔页面原点的地位；screenX 和 screenY 获取的是间隔显示屏的地位；clientX 和 clientY 获取的是间隔页面视口的间隔。在没有滚动条的时候，pageY 和 clientY 在数值上是一样的。当有滚动条的时候，pageY 会显著变大，因为它是绝对于页面原点。
二．冒泡和默认行为
阻止冒泡：
如果在页面中重叠了多个元素，并且重叠的这些元素都绑定了同一个事件，那么就会呈现冒泡问题。
示例：
//HTML 页面
1 <div style="width:200px;height:200px;background:red;">
2 <input type="button" value="按钮" />
3 </div>1 // 三个不同元素触发事件
2
3 $(‘input’).click(function () {
4
5 alert(‘ 按钮被触发了！’);
6
7 });
8
9 $(‘div’).click(function () {
10
11 alert(‘div 层被触发了！’);
12
13 });
14
15 $(document).click(function () {
16
17 alert(‘ 文档页面被触发了！’);
18
19 });</pre>
PS：当咱们点击文档的时候，只触发文档事件；当咱们点击 div 层时，触发了 div 和文档两个；当咱们点击按钮时，触发了按钮、div 和文档。触发的程序是从小范畴到大范畴。这就是所谓的冒泡景象，一层一层往上。
jQuery 提供了一个事件对象的办法：event.stopPropagation()；这个办法设置到须要触发的事件上时，所有下层的冒泡行为都将被勾销。
$(‘input’).click(function (e) {
alert(‘ 按钮被触发了！’);
e.stopPropagation();
});
阻止默认行为：
网页中的元素，在操作的时候会有本人的默认行为。比方：右击文本框输出区域，会弹出零碎菜单、点击超链接会跳转到指定页面、点击提交按钮会提交数据。
// 阻止超链接进行跳转
$(‘a’).click(function (e) {
e.preventDefault();
});
// 禁止提交表单跳转（留神是在 form 上阻止）
$(‘form’).submit(function (e) {
e.preventDefault();
});
PS：如果想让下面的超链接同时阻止默认行为且禁止冒泡行为，能够把两个办法同时写上：event.stopPropagation() 和 event.preventDefault()。这两个办法如果须要同时启用的时候，还有一种简写计划代替，就是间接 return false。
$(‘a’).click(function (e) {
return false;
});
