万网怎样做网站调试对网站内容建设的建议
张小明 2025/12/31 4:22:24
万网怎样做网站调试,对网站内容建设的建议,简单网站建设优化推广,wordpress获取主题目录#xff08;详细资料和相关课程可搜b站黑马程序员#xff09;一、事件流1.事件流与两个阶段说明事件流指的是事件完整执行过程中的流动路径说明#xff1a;假设页面里有个div#xff0c;当触发事件时#xff0c;会经历两个阶段#xff0c;分别是捕获阶段、冒泡阶段简单来…详细资料和相关课程可搜b站黑马程序员一、事件流1.事件流与两个阶段说明事件流指的是事件完整执行过程中的流动路径说明假设页面里有个div当触发事件时会经历两个阶段分别是捕获阶段、冒泡阶段简单来说捕获阶段是 从父到子 冒泡阶段是从子到父实际工作都是使用事件冒泡为主2.事件捕获事件捕获概念从DOM的根元素开始去执行对应的事件 (从外到里)addEventListener第三个参数传入true代表是捕获阶段触发很少使用3.事件冒泡事件冒泡当一个元素的事件被触发时同样的事件将会在该元素的所有祖先元素中依次被触发。这一过程被称为事件冒泡简单理解当一个元素触发事件后会依次向上调用所有父级元素的同名事件4.阻止冒泡因为默认就有冒泡模式的存在所以容易导致事件影响到父级元素若想把事件就限制在当前元素内就需要阻止事件冒泡阻止事件冒泡需要拿到事件对象语法此方法可以阻断事件流动传播不光在冒泡阶段有效捕获阶段也有效使用我们某些情况下需要阻止默认行为的发生比如 阻止链接的跳转表单域跳转5.解绑事件addEventListener方式必须使用语法removeEventListener(事件类型, 事件处理函数, [获取捕获或者冒泡阶段])6.鼠标经过事件的区别二、事件委托事件委托是利用事件流的特征解决一些开发需求的知识技巧优点减少注册次数可以提高程序性能原理事件委托其实是利用事件冒泡的特点。给父元素注册事件当我们触发子元素的时候会冒泡到父元素身上从而触发父元素的事件实现事件对象.target. tagName 可以获得真正触发事件的元素三、其他事件1.页面加载事件1加载外部资源如图片、外联CSS和JavaScript等加载完毕时触发的事件事件名load监听页面所有资源加载完毕给 window 添加 load 事件注意不光可以监听整个页面资源加载完毕也可以针对某个资源绑定load事件2当初始的 HTML 文档被完全加载和解析完成之后DOMContentLoaded 事件被触发而无需等待样式表、图像等完全加载事件名DOMContentLoaded监听页面DOM加载完毕给 document 添加 DOMContentLoaded 事件2.元素滚动事件1滚动条在滚动的时候持续触发的事件事件名scroll监听整个页面滚动给 window 或 document 添加 scroll 事件监听某个元素的内部滚动直接给某个元素加即可2页面滚动事件-滚动到指定的坐标scrollTo() 方法可把内容滚动到指定的坐标语法元素.scrollTo(x, y)3.页面尺寸事件会在窗口尺寸改变的时候触发事件resize页面尺寸事件-获取元素宽高获取宽高获取元素的可见部分宽高不包含边框margin滚动条等clientWidth和clientHeight四、元素尺寸位置1.使用场景前面案例滚动多少距离都是我们自己算的最好是页面滚动到某个元素就可以做某些事。简单说就是通过js的方式得到元素在页面中的位置这样我们可以做页面滚动到这个位置就可以做某些操作省去计算了。获取宽高1获取元素的自身宽高、包含元素自身设置的宽高、padding、border。2offsetWidth和offsetHeight3获取出来的是数值,方便计算。注意: 获取的是可视宽高, 如果盒子是隐藏的,获取的结果是0获取位置1获取元素距离自己定位父级元素的左、上距离2offsetLeft和offsetTop 注意是只读属性3element.getBoundingClientRect() 方法返回元素的大小及其相对于视口的位置2.其他方法