WebApi第四天

一、注意点
1、局部变量无法保存上一次的结果
2、根据数组数据来批量克隆模板
3、将模板数据动态化=>数组名[index] => 数组的每一项 => 对象 => 数组名[index].属性名
4、优先级=>z-index => style.zIndex
二、鼠标位置信息
1、document.onclick = function (event) {
        console.log(event.screenX, event.screenY); // 相对于屏幕的位置 了解即可
        console.log(event.pageX, event.pageY); // 相对于页面的位置 使用最多
        console.log(event.clientX, event.clientY); // 相对于浏览器窗口的位置
      };
2、鼠标移动事件: mousemove => 在移动的过程中 持续触发
三、事件
1、解绑事件 => 使用null覆盖掉原来的事件处理函数即可
3、拖拽：
      3.1、鼠标按下 => mousedown
      3.2、鼠标移动 => mousemove
      注意：mousemove事件必须等到mousedown按下了之后才能注册
      坑: 不要给box注册mousemove, 这样只要移动过快 就会移出box的区域 导致mousemove无法触发
      解决: 将mousemove注册给document
      3.3、 鼠标抬起 => mouseup
      坑: 最好将mouseup注册给document, 这样可以保证只要在页面上松开咯鼠标 就可以将mousemove事件解绑掉
       3.4、使用移动过程的最新鼠标落点 - 按下位置的鼠标落点  = 当前这一次的移动距离
       3.5、最终的位置： 每一次移动前初始位置 + 当前这一次的距离
4、事件冒泡
     当一个元素的事件被触发时，同样的事件将会在该元素的所有祖先元素中依次被触发。这一过程被称为事件冒泡，只要存在嵌套关系的元素,就会有事件冒泡.跟有没有绑定该事件无关
5、事件委派
     因为如果没有事件冒泡, 会导致给大盒子注册的事件很难被触发
     利用事件委派 => 自己不执行事件 委派给父元素
     理念简化=>事件委派 => 原理 => 事件冒泡
     顺序: 需要找到点击的那个元素 ? => 事件对象(存储这当前事件的一些信息)=>判断如果当前点击的元素的标签名称,进行操作
6、组止事件冒泡
      1. 先要明确那一块区域不能冒泡
      2. 需要阻止什么事件传递就给这块区域的最大盒子注册该事件
      3. 在事件处理函数里面接受事件对象, 并添加上e.stopPropagation()
7、事件捕获=>addEventListener
     7.1、了解一下事件监听
              事件侦听 => 传统的on注册事件默认都是冒泡机制触发
              第一个参数：事件的类型：click mouseenter
              第二个参数：事件处理函数，监听者，每次点击，这个函数就执行。
              第三个参数：是否使用捕获，默认为false，表示冒泡
              DOM节点.addEventListener(type, func, useCapture);
      7.2、了解一下事件流
            任何一个事件都要经历三个阶段
            1. 捕获阶段
            2. 目标阶段（点谁谁就是目标）
            3. 冒泡阶段
            小技巧: 先找 true  (从大到小) 在找 false (从小到大)
8、传统事件注册与监听器注册的区别
     传统事件注册：
     1、传统事件注册同一个事件后面会覆盖前面的
     2、只能在冒泡阶段触发
     3、直接使用null覆盖即可解绑
     侦听器注册
     1、侦听器注册的事件不会出现覆盖的情况
     2、可以通过第三个参数自由的选择在不同的阶段触发事件
     3、匿名函数无法解绑 => 解决方案: 使用函数表达式或者函数声明
     4、需要使用专门的语法实现解绑=>DOM对象.removeEventListener('click', 需要解绑的函数名)
四、阻止浏览器的默认行为=>e.preventDefault();
      例：
1、获取a链接

      .onclick = function (e) {
      //  阻止浏览器的默认行为 => a链接的自动跳转
        e.preventDefault();
      };
2、获取表单元素

       .onclick = function (e) {
        // 阻止浏览器的默认行为 => 表单的自动提交
        e.preventDefault();
        if (ipt.value.length >= 6 && ipt.value.length <= 10) {
          // 手动提交
          form.submit();
        }
      };
五、offset系列             
1. offsetWidth offsetHeight  盒子的可视宽高 => 如果盒子是隐藏的, 大小是0，获取元素真实的高度和宽度
2. offsetParent => 绝对定位元素的参照物 (就近的定位父元素)
3. offsetLeft和offsetTop => 当前元素到offsetParent的左侧和顶部的距离
4. 获取到的是数值类型，方便计算
5. offsetHeight与offsetWidth是只读属性，不能设置。