一、注意点
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是只读属性,不能设置。