20200914岳浩天

知识总结

一个事件可绑定多个处理函数
绑定：elem.addEventListener("事件名",fn);
移除：elem.removeEventListener("事件名",fn)如果一个处理函数可能被移除，在绑定时不能使用匿名函数，必须使用有名的函数

DOM三个阶段：

捕获：由外向内, 记录各级父元素绑定的事件处理函数，只记录，不执行

目标触发：优先触发目标元素上的事件处理函数

冒泡：由内向外, 反向依次触发捕获阶段记录的事件处理函数

IE8没有捕获阶段

取消冒泡/停止蔓延：

function(e){
e. stopPropagation();
}

利用冒泡：e.target

取消事件/阻止默认行为e.preventDefault()

什么时候使用？
阻止<a href="#xxx" 修改url
在表单的onsubmit事件结尾阻止表单提交
用H5拖拽API，需要先禁用浏览器默认的拖拽行为

事件坐标：

相对于屏幕左上角
e.screenX/screenY
相对于文档显示区左上角
e.clientX/clientY
相对于触发事件元素的左上角
e.offsetX/offsetY

load和DOMContentLoaded

load 等页面内容全部加载完毕，包括dom元素 图片 flash css等

DOMContentLoaded 是dom加载完毕，不包含图片 falsh css等就执行 加载速度比lode快一些

offset系列

offsetWidth/offsetHeight 获取的是padding+border+width/height

offsetParent和parentNode的区别：

parentNode：返回最近一级的父元素

offsetParent：返回带有定位的父元素，若都没有定位则返回body

offset和style的区别：

offset可以获取任意样式表中的样式值，style只能获取行内样式表中的样式值

offset获得的数值没有单位，style获得的是带有单位的字符串

offsetWidth包含padding+border+width/height，style.width不包含padding和border的width

offsetWidth等是只读属性不能赋值，style.width是可读写属性，可以赋值

结论

获取元素大小位置用offset更合适；

想要给元素改值，用style改变

心得

今天讲得东西，我自学了一段时间，今天又温故了一下，总结一下：自学+自己思考+温故=>效果很好，nice！