jQuery基础（4）- 位置信息、事件流、事件对象、事件代理、jquery事件
一、jQuery的位置信息
jQuery的位置信是JS的client系列、offset系列、scroll系列封装好的一些简便api。
1、宽度和高度
a、获取宽度和高度，例如：
.width() // 获取匹配元素集合中的第一个元素的宽度值，内容宽度，不含padding .height() // 获取匹配元素集合中的第一个元素的高度值，内容高度，不含padding
注意：这个方法不接受任何参数。.css(‘width’)（或.css(‘height’)）和 .width()（或.height()）之间的区别是后者返回一个没有单位的数值（例如，400），前者是返回带有完整单位的字符串（例如，400px）。当一个元素的宽度（或高度）需要数学计算的时候推荐使用.width()（或.height()） 方法。
b、设置宽度和高度，例如：
.width(value) // 给每个匹配的元素设置宽度，value为数字，不带单位 .height(value) //给每个匹配的元素设置高度，value为数字，不带单位
2、innerWidth()和innerHeight()
a、获取内部宽和高，例如：
.innerWidth() // 获取匹配元素集合中第一个元素的宽度值,含padding，不含border .innerHeight() // 获取匹配元素集合中第一个元素的高度值,含padding，不含border
注意：这种方法不适用于window 和 document对象，对于这些对象可以使用.width()和.height()代替。
b、设置内部宽和高，例如：
.innerWidth(value) // 给每个匹配的元素设置内部宽度，value为数字，不带单位 .innerHeight(value) //给每个匹配的元素设置内部高度，value为数字，不带单位
3、outerWidth()和outerHeight()
a、获取外部宽和高
// 获取匹配元素集合中第一个元素的外部宽度（包括padding，border和可选的margin） .outerWidth([includeMargin]) // 获取匹配元素集合中第一个元素的外部高度（包括padding，border和可选的margin） .outerHeight([includeMargin])
参数includeMargin：类型是布尔值，默认为false，表示不包含margin值。
注意：这个方法不适用于window 和 document对象，对于这些对象可以使用.width()和.height()代替。
b、设置外部宽和高
.outerWidth(value) // 给每个匹配的元素设置内部宽度，value为数字，不带单位 .outerHeight(value) //给每个匹配的元素设置内部高度，value为数字，不带单位
4、偏移
a、获取偏移量，例如：
.offset() // 返回一个包含top和left属性的Object对象
描述：在匹配的元素集合中，获取的第一个元素的当前坐标，坐标相对于文档，与父相子绝无关。
注意：jQuery不支持获取通过display:none隐藏元素的偏移坐标。同样的，也无法取得隐藏元素的 border, margin, 或 padding 信息。若元素的属性设置的是 visibility:hidden，那么我们依然可以取得它的坐标。
b、设置偏移量，例如：
.offset({ top: 10, left: 30}); // 设置匹配的元素集合中每一个元素的坐标，坐标相对于文档
5、元素坐标
.position() // 返回一个包含top和left属性的Object对象
描述：描述获取匹配元素中第一个元素的当前坐标，相对于offset parent的坐标 (offset parent指离该元素最近的而且被定位过的祖先元素 )。
注意：当把一个新元素放在同一个容器里面另一个元素附近时，用.position()更好用。
6、滚动距离
a、获取水平方向滚动距离和垂直方向滚动距离，例如：
.scrollLeft() // 获取匹配元素集合中第一个元素的当前水平滚动条的位置（页面卷走的宽度） .scrollTop() // 获取匹配的元素集合中第一个元素的当前迟滞滚动条的位置（页面卷走的高度）
b、设置水平方向滚动距离和垂直方向滚动距离，例如：
.scrollLeft(value) // 设置每个匹配元素的水平方向滚动条位置 .scrollLeft(value) // 设置每个匹配元素的垂直方向滚动条位置
二、JS的事件流的概念
1、事件的概念
HTML中与javascript交互是通过事件驱动来实现的，例如鼠标点击事件onclick、页面的滚动事件onscroll等等，可以向文档或者文档中的元素添加事件侦听器来预订事件。想要知道这些事件是在什么时候进行调用的，就需要了解一下“事件流”的概念。
2、什么是事件流
事件流描述的是从页面中接收事件的顺序。
3、事件流的由来（了解）
由于微软和网景乱搞，后来必须要为事件传播机制，制定一个标准，因为事件捕获是网景公司开发出来的，而事件冒泡是由微软公司开发出来的，它们都想要自己的技术成为标准，所以导致这两个公司老是干架，制定标准的人为了不让它们干架，所以研发了事件流。
4、”DOM2级事件”规定的事件流包括三个阶段：
①事件捕获阶段：事件捕获和事件冒泡是相反的，也就是说，当用户触发了一个事件的时候，这个事件是从DOM树的最上层开始触发一直到捕获到事件源；
②处于目标阶段：事件在目标元素上发生并处理，但是事件处理会被看成是冒泡阶段的一部分；
③事件冒泡阶段：官方的定义就是从最特定的事件目标到最不特定的事件目标，意思就是说，加入用户单击了一个元素，，该元素拥有一个click事件，那么同样的事件也将会被它的祖先触发，这个事件从该元素开始一直冒泡到DOM树的最上层，这一过程称为事件冒泡；
5、事件流的写法以及实现方式
a、标准实现方式是使用关键词addEventListener，假如你想给某元素添加/删除事件，可以这样写：
element.addEventListener(eventType, fn, false); element.removeEventListener(eventType, fn, false);
参数解释：
eventType：表示要使用哪种事件类型，比如click；
fn：回调函数，里面写触发此事件你要做什么事情；
false：事件机制，分为冒泡和捕获，false表示事件冒泡，true表示事件捕获；
b、既然有标准的实现方式，那么肯定也存在着非标准的写法，如下：
element.attachEvent(eventType, fn); // 这种写法兼容IE, IE没有实现事件捕获 element.detachEvent(eventType, fn);
参数解释：
eventType：事件类型；
fn：回调函数；
c、冒泡和捕获的示例，如下：
<button id="btn">按钮</button> <script> window.onload = function(){ var oBtn = document.getElementById('btn'); document.addEventListener('click',function(){ console.log('document处于事件捕获阶段'); }, true); document.documentElement.addEventListener('click',function(){ console.log('html处于事件捕获阶段'); }, true); document.body.addEventListener('click',function(){ console.log('body处于事件捕获阶段'); }, true); oBtn.addEventListener('click',function(){ console.log('btn处于事件捕获阶段'); }, true); oBtn.addEventListener('click',function(){ console.log('btn处于事件冒泡阶段'); }, false); document.body.addEventListener('click',function(){ console.log('body处于事件冒泡阶段'); }, false); document.documentElement.addEventListener('click',function(){ console.log('html处于事件冒泡阶段'); }, false); document.addEventListener('click',function(){ console.log('document处于事件冒泡阶段'); }, false); }; </script> <!-- 控制台输出结果如下： document处于事件捕获阶段 html处于事件捕获阶段 body处于事件捕获阶段 btn处于事件捕获阶段 btn处于事件冒泡阶段 body处于事件冒泡阶段 html处于事件冒泡阶段 document处于事件冒泡阶段 -->
三、事件对象
什么是事件对象？在触发DOM上的事件时都会产生一个对象。
1、认识事件对象
事件在浏览器中是以对象的形式存在的，即event。触发一个事件，就会产生一个事件对象event，该对象包含着所有与事件有关的信息。包括导致事件的元素、事件的类型以及其他与特定事件相关的信息。
例如：鼠标操作产生的event中会包含鼠标位置的信息；键盘操作产生的event中会包含与按下的键有关的信息。
所有浏览器都支持event对象，但支持方式不同，在DOM中event对象必须作为唯一的参数传给事件处理函数，在IE中event是window对象的一个属性。
2、什么时候产生事件对象？
当触发某个事件的时候，这个事件的回调函数的形参会默认接收一个event事件对象。
3、DOM中的事件对象
DOM0级和DOM2级事件处理程序都会把event作为参数传入。
根据习惯：可以用e，或者ev或者event。
DOM中事件对象重要属性和方法：
|
属性 |
描述 |
|
type |
用于获取事件类型 |
|
target |
用于获取事件目标，即事件加在哪个元素上 |
|
方法 |
描述 |
|
stopPropagation() |
用于阻止事件冒泡 |
|
preventDefault() |
阻止事件的默认行为（移动端用的多） |
4、IE中的事件对象
第一种情况： 通过DOM0级方法添加事件处理程序时，event对象作为window对象的一个属性存在。
第二种情况：通过attachEvent()添加的事件处理程序，event对象作为参数传入。
IE中事件对象重要属性和方法：
|
属性 |
描述 |
|
type |
用于获取事件类型 |
|
srcElement |
用于获取事件目标，即事件加在哪个元素上 |
|
cancelBubble |
用于阻止事件冒泡，是属性（true表示阻止） |
|
returnValue |
用于阻止事件的默认行为，是属性（false表示阻止） |
5、Event对象的一些兼容性写法（了解）
a、获得event对象兼容性写法，如下：
event || (event = window.event);
b、获得target兼容型写法，如下：
event.target||event.srcElement;
d、阻止冒泡兼容性写法，如下：
event.stopPropagation ? event.stopPropagation() : (event.cancelBubble =true);
c、阻止浏览器默认行为兼容性写法，如下：
event.preventDefault ? event.preventDefault() : (event.returnValue = false);
四、事件委托（事件代理）
通俗的讲，onclick、onmouseover、onmouseout等就是事件，委托，就是让别人来做，这个事件本来是加在某些元素上的，然而我们可以加到别人身上，来完成这个事件。
1、原理
利用冒泡的原理，把事件加到父级上，触发执行效果。
2、作用
a、性能要好；
b、针对新创建的元素，直接可以拥有事件；
3、事件源
跟this作用一样(他不用看指向问题，谁操作的就是谁),event对象下的。
4、使用情景
a、为DOM中的很多元素绑定相同事件；
b、为DOM中尚不存在的元素绑定事件；
5、语法：.on( events [, selector ] [, data ], handler(eventObject))
参数解释：
events：String类型，一个或多个空格分隔的事件类型；
selector：String类型，选择器字符串，用于过滤出被选中的元素中能触发事件的后代元素；
data：任意类型，当一个事件被触发时，要传递给事件处理函数的event.data；
handler(eventObject)：Function类型，事件被触发时，执行的函数；
描述：在选定的元素上绑定一个或多个事件处理函数。
示例：
<ul>
<li>第一项</li>
<li>第二项</li>
</ul>
<script>
$(function () {
// 现有的li和未来添加的li都能做事件操作
$('ul').on('click','li',function () {
alert(this.innerText);
});
$('ul').append('<li>第三项</li>');
})
</script>
五、jquery常用的事件
jquery常用的事件，大家一定要熟记在心，如下：
|
事件 |
描述 |
|
click() |
鼠标单击触发事件 |
|
dblclick() |
鼠标双击触发事件 |
|
mousedown()/mouseup() |
鼠标按下/弹起触发事件 |
|
mousemove() |
鼠标移动 |
|
mouseover()/mouseout() |
鼠标移入/移出触发（包含被选元素和其子元素） |
|
mouseenter()/mouseleave() |
鼠标移入/移出触发（只在穿过/离开被选元素时触发） |
|
hover() |
hover(fn1,fn2)分别当鼠标指针进入和离开元素时执行 |
|
focus()/blur() |
表单控件聚焦/失去焦点时触发 |
|
keydown()/keyup() |
键盘按下/弹起时触发 |
|
change() |
表单元素发生改变时触发 |
|
select() |
文本元素发生改变时触发事件 |
|
submit() |
表单提交时触发 |
六、解决单双击冲突问题
知识铺垫：两次点击间隔小于300ms为双击，所以考虑利用定时器解决，如下：
<button>按钮</button>
<script>
var timer = null;
$('button').click(function () {
clearTimeout(timer); // 开定时器之前先关定时器
timer = setTimeout(function () {
console.log('单击了');
},300)
});
$('button').dblclick(function () {
clearTimeout(timer);
console.log('双击了');
});
</script>
七、应用：回到顶部代码示例：
<div class="fixTop">回到顶部</div> <script> $(function () { $('.fixTop').click(function(event) { $('html,body').animate({ 'scrollTop':0 },1000) }); }); </script>
