【黑马程序员】Web前端学习心得总结(二).docxVIP

视频库网址： 视频库网址： 资料领取：+Q 1679806262 【黑马程序员】Web 【黑马程序员】Web 前端学习心得总结（二） 九：什么是事件委托 为什么要用事件委托 九：什么是事件委托 为什么要用事件委托 事件委托 事件委托 事件委托就是利用事件冒泡机制指定一个事件处理程序，来管理某一类型的所有事件。 即：利用冒泡的原理，把事件加到父级上，触发执行效果。 好处：只在内存中开辟了一块空间，节省资源同时减少了dom 好处： 只在内存中开辟了一块空间，节省资源同时减少了dom 操作，提高性能 对于新添加的元素也会有之前的事件 为什么要用事件委托： 一般来说，dom 需要有事件处理程序，我们都会直接给它设事件处理程序就好了，那如果是很多的 一般来说，dom 需要有事件处理程序，我们都会直接给它设事件处理程序就好了，那如果 是很多的 dom 需要添加事件处理呢？比如我们有100 个 li，每个 li都有相同的 click点击 事件，可能我们会用for循环的方法，来遍历所有的li，然后给它们添加事件，那这么做会 存在什么影响呢？ 在 JavaScript中，添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能，因为需要不断的与 在 JavaScript中，添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能， 因为需要不断的与 dom 节点进行交互，访问dom 的次数越多，引起浏览器重绘与重排的 次数也就越多，就会延长整个页面的交互就绪时间，这就是为什么性能优化的主要思想之一 就是减少 DOM 操作的原因；如果要用事件委托，就会将所有的操作放到js程序里面，与dom 的操作就只需要交互一次，这样就能大大的减少与dom 的交互次数，提高性能； 视频库网址： 视频库网址： 资料领取：+Q 1679806262 每个函数都是一个对象，是对象就会占用内存，对象越多，内存占用率就越大，自然性能就 越差了（内存不够用，是硬伤，举个例子：页面上有这么一个节点树，divullia;比如给最里面的 越差了（内存不够用，是硬伤， 举个例子：页面上有这么一个节点树，divullia;比如给最里面的 a 加一个click点击事 件，那么这个事件就会一层一层的往外执行，执行顺序aliuldiv，有这样一个机制，那 么我们给最外面的 div 加点击事件，那么里面的ul，li，a 做点击事件的时候，都会冒泡到最外层的div 上，所以都会触发，这就是事件委托，委托它们父级代为执行事件。 原生 原生js的 window.onload 与 jq 的$(document).ready(function(){}的) 区别 1.执行时间 window.onload 必须等到页面内包括图片的所有元素加载完毕后才能执行。 $(document).ready() 是 DOM 结构绘制完毕后就执行，不必等到加载完毕。 2.编写个数不同 2.编写个数不同 window.onload 不能同时编写多个，如果有多个 window.onload 方法， 只会执 行一个 $(document).ready() 可以同时编写多个，并且都可以得到执行 3.简化写法 window.onload 没有简化写法 (document).ready(function())可以简写成 (document).ready(function(){}可) 以简写成 (document).ready(function(){}可) 以简写成 (document).ready(function())可以简 写成 (function(){；}) 十：positon 有几种取值，分别是什么？ 十：positon 有几种取值，分别是什么？ static静: 态定位，是 position属性的默认值，表示无论怎么设置 top 、bottom 、right、left 属性元素的位置（与外部位置）都不会发生改变。 relativ relativ：e 相对定位，表示用top 、bottom 、right、left属性可以设置元素相对与其相对于 初始位置的相对位置。 absolute：绝对定位，表示用top 、bottom 、right、left属性可以设置元素相对于其父元 素（除了设置了 素（除了设置了static的父元素以外）左上角的位置，如果父元素设置了static，子元素会 继续追溯到祖辈元素一直到body 。 fixed：绝对定位，相对于浏览器窗口进行定位，同样是使用top 、bottom 、right、left。四种取值中，除了static之外，其他属性都可通过 z-index 进行层次分级 十一：px,em,rem的区别 十一：px,em,rem 的区别 PX