[前端学习]js特效部分学习笔记，第二天

事件对象

• 在我们注册事件后，并不会直接调用这个匿名函数，而是触发这个事件时才执行内部代码。
• 所以真正调用匿名函数的是浏览器。浏览器在调用时会传入一个对象参数(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参数，它都是跳过了捕获阶段，直接找到事件源执行再事件冒泡,目前捕获阶段我们很少接触到