事件对象
- 在我们注册事件后，并不会直接调用这个匿名函数，而是触发这个事件时才执行内部代码。
- 所以真正调用匿名函数的是浏览器。浏览器在调用时会传入一个对象参数(event)，哪怕我们没写形参，也是会传入的。这个就叫作事件对象。
- 事件对象内部存储的是一系列与该事件有关系的属性值。所以如果想获取事件对象，在给匿名函数写一个形参就可以。
获取事件对象兼容写法
- 之前已经说过了，通过形参可以直接获取到事件对象，但是这种方法主流浏览器支持，ie678不支持，所以一般推荐使用兼容的方法。
document.onclick = function (event) {
var event = event || window.event;
}; - 上面是随便注册了一个事件作为例子，设置一个形参，并在函数内部声明一个event变量来存放事件对象。
- 写或的原因是使用到了它的短路判断，如果第一个值为true，说明浏览器支持这种方法，根据或的短路原理，第一个为true直接返回该值。如果第一个不为true才继续往下判断。
三个重要坐标
-
事件对象.screenX & 事件对象.screenY获取鼠标在屏幕中的坐标 -
事件对象.clientX & 事件对象.clientY获取鼠标在窗口中的坐标 -
事件对象.pageX & 事件对象.pageY获取鼠标在页面中的坐标 - clientXY和pageXY的区别在于：如果页面很长，那么pageXY会以整个页面来计算坐标，而clientXY则是只会根据当前的显示窗口来计算坐标。
鼠标在页面中坐标的兼容写法
- 也是ie678不支持pageX和pageY，但是ie678却支持clientXY，所以建议使用以下兼容写法：
pageX = event.pageX || event.clientX + document.documentElement.scrollLeft //Y轴同理 - 获取鼠标在窗口中的位置，再加上被卷去的部分，也可以得到鼠标在页面中的坐标
鼠标跟随案例总结
- 比较简单的一个案例，主要就是获取事件对象中的pageX和pageY值，并赋给添加了定位元素的left和top，就能实现鼠标跟随效果
- 有一个稍微要注意的是，如果直接赋值那么元素在跟随的时候，是左上角对齐鼠标坐标。如果想要让元素中心对齐鼠标坐标，要减去元素自身高和宽分别的一半。
获取鼠标在盒子中的坐标
- 首先要知道，鼠标在盒子中的坐标是不能直接获取的，需要通过计算。
- 计算的原理，用鼠标在页面中的坐标值，减去盒子本身到body两侧的距离，那么剩下的就是鼠标在盒子中的坐标值
- 下面例子做一个参考：
boxX = pageX - box.offsetLeft;
boxY = pageY - box.offsetTop; - 同时本节又讲到了一个新的事件，
onmousemove鼠标移动事件
放大镜案例总结
- 这个案例实际上运用到了，上面讲的几个知识点，包括获取鼠标在盒子内坐标，设置鼠标跟随盒子。
- 有两个重点：
- 一是在盒子内部设置鼠标跟随盒子时，要限制跟随盒子可以移动的范围，不能让其超出盒子
- 二是让大图同步移动时，比例的计算问题。当然比例不是一定要计算，直接给一个对应的比值也行，不过为了精确显示，建议还是要计算出来。公式就是：
大图应该设置坐标 = rate(比例) * 跟随图坐标。rate的公式为：rate = 大图可以移动总距离 / 跟随图可以移动总距离
- 详细代码参考案例，更容易理解
鼠标拖拽案例总结
- 这个案例的重点在于：当鼠标移动时，如果不计算那么默认盒子左上角跟随鼠标移动，这明显不是我们想要的效果。
- 所以需要计算盒子应该移动的距离，首先要计算鼠标在按下时，在盒子的内的坐标，然后再用鼠标在页面中的坐标减去盒子的坐标，就可以让鼠标按下的那个点一直对准鼠标进行跟随。
- 实际上就是在移动时，默认先让盒子移动了鼠标在盒子中坐标的距离，然后再跟随鼠标移动，这样看起来就不是左上角跟随了。
- 并且涉及到了清除选中文字状态的代码：
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
滚动条案例总结
- 滚动条案例逻辑其实是结合了上面的两个案例，有以下几个重点
- 滚动条的长度不是定值，需要通过公式来计算：
滚动条高度/侧边栏高度 = 内容显示高度/内容总高度 - 想要鼠标拖动时不是滚动条顶部对齐跟随移动，就要求到鼠标在滚动条内的坐标，用
鼠标在页面中的坐标-盒子到顶部的距离-滚动条到盒子顶部的距离，就可以得到。然后用鼠标在盒子中的坐标-鼠标在滚动条中的坐标，让滚动条移动时默认先往上走这个距离，就可以实现滚动条根据鼠标点击的那个点来跟随移动 - 要让内容根据滚动条移动的比例来移动，就要根据这个公式：
内容应该移动的位置/滚动条当前的位置 = 内容能够移动的总距离/滚动条能够移动的总距离
瀑布流案例总结
- 瀑布流案例的几个重点：
- 求出每行剩余空白宽度后，还要除以列数-1，平均分配空白间距
- 第一行布局不需要设置top值
- left设置时，
值 = (图片宽度 + 间距) * (对应索引||最小高度列索引值)，这样才能让图片的位置在其对应列或者最小高度列上 - 第二行开始要把图片放到高度最小的那列上，所以需要一个数组来存放每列的高度，然后比较数组中的值，找出高度最小的那列。
- 每次把图片放到高度最小那列后，还要给那列的高度值重新赋值，
值 = 原高度+新图片高度+间距 - 瀑布流需要浏览器滚动事件
window.onscroll，为了避免出现滚动时出现空白影响效果，所以在追加图片时，判断条件为:窗口可视区高度 + 页面被卷去高度 > 最小高度列的高度值，一旦大于肯定会出现空白，所以就要追加图片，并再次调用瀑布流布局函数
事件冒泡
- 在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。正常情况下这个不会有什么影响
- 但是也有特例，比如鼠标离开事件，如果父元素注册了鼠标事件，子元素没有注册。当鼠标离开子元素时，虽然没有注册事件不会执行，但是该事件确实触发了就会冒泡，到上级发现父元素注册了。就会执行父元素注册的鼠标离开事件，这显然是不行的
阻止事件冒泡
- 为了避免事件冒泡而产生的一些不可控结果，我们需要阻止事件冒泡，要阻止谁的事件冒泡，就在让该元素调用阻止冒泡的方法。
event.stopPropagation(); - 调用这个方法，需要先获取事件对象来配合
阻止事件冒泡兼容写法
- 写法如下
if( event.stopPropagation ) {
event.stopPropagation();
} else {
event.cancelBubble = true;
} - 如果调用stopPropagation方法有返回值，说明浏览器支持，如果为空说明浏览器不支持，那就设置cancelBubble属性。一般只有ie678不支持stopPropagation方法
获取事件目标
-
var target = event.target || event.srcElement可以获取事件的源目标，就是说由哪个元素触发了这个事件，就获取到哪个元素，target.id还能获取该元素的id值
事件监听器
- 如果使用之前的事件注册方法，那么同一个元素相同的事件会相互覆盖，一般只会保留后写注册的事件
- 但是如果使用事件监听器的方法来注册事件，那么即使是同一元素的相同事件也不会覆盖，而是根据注册顺序依次执行
- 主流浏览器的写法：
元素.addEventListener([事件名字符串，注意这里事件名不加on],[事件处理程序function],[是否捕获true||false]); - ie678的写法：
元素.attachEvent([事件名字符串，注意这里事件名要加on],[事件处理程序function]); - 捕获参数详解：如果传入的参数是false，就是不使用捕获，那么事件的执行顺序就是默认顺序冒泡，从内到外；如果传入true使用捕获，那么浏览器会从外到内先捕获事件源，找到事件源后，再执行冒泡。捕获就是从外内到寻找的过程。
监听器移除事件方法
- 普通注册事件的方式，想要移除事件，利用事件会相互覆盖的原理，重新注册该事件并赋值为空，就能移除。但是如果是使用监听器来注册的事件，那么需要用到以下方法：
- 主流浏览器：
元素.removeEventListener()[事件名字符串，注意这里事件名不加on],[处理函数名],[是否捕获true||false]); - ie678
元素.detachEvent([事件名字符串，注意这里事件名要加on],[处理函数名]); - 从代码可以看出，如果要移除事件，需要传入事件处理函数的名称，所以如果使用监听器注册函数，并且在之后想要移除，那么建议不要用匿名函数，直接在外部写好传入函数名称来注册，也方便后面移除
事件阶段
- 事件阶段也叫做事件流模型。通过
event.phase可以查看事件的各个阶段 - 一个完整的事件三阶段：从外到内捕获阶段-事件目标执行阶段-事件冒泡阶段
- 但是传统注册事件方法，和监听器注册事件方法传入false参数，它都是跳过了捕获阶段，直接找到事件源执行再事件冒泡,目前捕获阶段我们很少接触到
网友评论