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!

评论

© 2021 成都云创动力科技有限公司 蜀ICP备20006351号-1