Document

一、什么是闭包和闭包的几种写法和用法

二、Javascript闭包的用途

\r\n

\r\n\r\n\r\n```\r\n当子元素浮动父级获取不到浮动元素的高度，造成高度塌陷\r\n\r\n\r\n当父元素转变为BFC时，浮动元素被包裹住：\r\n```html\r\n\r\n\r\n\r\n \r\n Document\r\n \r\n\r\n\r\n

\r\n

\r\n\r\n\r\n```\r\n\r\n## 2.浮动重叠\r\n当一个元素浮动，后面的元素没浮动，那么后面的元素就会与浮动元素发生重叠\r\n```html\r\n\r\n\r\n\r\n \r\n Document\r\n \r\n\r\n\r\n

\r\n

\r\n\r\n\r\n```\r\n后一个元素与前一个浮动元素发生重叠\r\n\r\n根据BFC不与浮动元素重叠的特性，为没有浮动的元素创建BFC环境\r\n```html\r\n\r\n\r\n\r\n \r\n Document\r\n \r\n\r\n\r\n

\r\n

\r\n\r\n\r\n```\r\n\r\n## 3.边距重叠\r\n边距重叠分为两种情况\r\n\r\n- 父子重叠\r\n```html\r\n当父级没有 \r\n- 垂直方向的border，\r\n- 垂直方向 padding，\r\n- 父级不是内联元素，\r\n- 父级不是BFC,\r\n- 父级没有清除浮动，\r\n\r\n这五个条件时，子元素的上下边距会和父级发生重叠 \r\n\r\n\r\n\r\n \r\n Document\r\n \r\n\r\n\r\n

\r\n

\r\n\r\n\r\n```\r\n\r\n解决办法：\r\n```html\r\n\r\n\r\n\r\n \r\n Document\r\n \r\n\r\n\r\n

\r\n

\r\n\r\n\r\n```\r\n\r\n- 兄弟重叠\r\n当两个元素的垂直边距相互接触时，两者边距会发生合并，合并的规则为 \r\n```html\r\n- 如果是正数比大小，大的覆盖小的\r\n- 都为负数比绝对值大小，大的覆盖小的\r\n- 正负都有取其差\r\n\r\n1.将两个元素浮动\r\n2.将两个元素display：inline-block\r\n\r\n\r\n\r\n \r\n Document\r\n \r\n\r\n\r\n

\r\n

\r\n\r\n\r\n```\r\n其实兄弟重叠完全可以设置一个最大值的边距就可达到想要的效果，完全没有必要去使用上面的两个方法。\r\n\r\n\r\n\r\n# 参考文档\r\n- https://blog.csdn.net/itseven7/article/details/79009215\r\n\r\n\r\n\r\n\r\n",{"_54":566,"_164":141,"_165":141,"_166":141,"_167":141,"_168":141,"_169":141,"_170":141,"_171":141,"_172":141},"https://api.github.com/repos/pro-collection/interview-question/issues/35/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/35/timeline",{"_54":569,"_56":57,"_58":570,"_60":571,"_62":572,"_64":573,"_66":574,"_68":575,"_70":576,"_72":577,"_74":578,"_107":579,"_120":121,"_122":26,"_123":-5,"_124":581,"_126":582,"_148":133,"_142":584,"_144":585,"_147":-5,"_151":152,"_153":586,"_158":-5,"_159":587,"_161":588,"_173":590,"_175":-5,"_176":-5,"_177":178},"https://api.github.com/repos/pro-collection/interview-question/issues/34","https://api.github.com/repos/pro-collection/interview-question/issues/34/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/34/comments","https://api.github.com/repos/pro-collection/interview-question/issues/34/events","https://github.com/pro-collection/interview-question/issues/34",1611652796,"I_kwDOJGDC6c5gD968",34,"DOM事件类相关问题",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[580],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},[],{"_54":367,"_64":368,"_58":369,"_66":370,"_68":371,"_70":178,"_72":372,"_118":373,"_136":583,"_138":375,"_140":141,"_120":121,"_142":376,"_144":377,"_146":-5,"_147":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-03-06T15:20:56Z","2023-04-24T03:50:54Z",{"_155":141,"_156":141,"_157":141},"DOM事件级别、DOM事件模型、DOM事件流、DOM事件捕获的具体流程、Event对象的常见应用、自动以事件\r\n\r\n# dom 级别\r\nDOM级别一共可以分为四个级别：DOM0级、DOM1级、DOM2级和DOM3级。\r\nDOM级别其实就是标准的迭代，对于版本的称呼，类似ES5、ES6。\r\n\r\n## 1、DOM0级\r\nDOM没有被W3C定为标准之前。\r\n\r\n## 2、DOM1级\r\n1998年10月成为W3C的标准后，称为DOM1级。DOM1级由两个模块组成：DOM核心（DOM Core）和DOM HTML。其中，DOM核心规定的是如何映射基于XML的文档结构，以便简化对文档中任意部分的访问和操作。DOM HTML模块则在DOM核心的基础上加以扩展，添加了针对HTML的对象和方法。\r\n\r\n## 3、DOM2级\r\n在DOM1级的基础上进行了扩展。为节点添加了更多方法和属性等。\r\n添加新的模块，包括：视图、事件、范围、遍历、样式等。\r\n\r\n## 4、DOM3级\r\nDOM3级进一步扩展了DOM，增加了XPath模块、加载和保存（DOM Load and Save）模块等，开始支持XML1.0规范。\r\n\r\n\r\n\r\n\r\n# DOM事件\r\n## 1、DOM0级事件\r\nDOM0级处理事件就是将一个函数赋值给一个事件处理属性。\r\n```js\r\n \r\n \r\nvar btn = document.getElementById('btn')\r\nbtn.onclick = function() { \r\n console.log('Hello World')\r\n}\r\n// 将一个函数赋值给了一个事件处理属性onclick 这样的方法就是DOM0级。\r\n// 可以通过给事件处理属性赋值null来解绑事件。\r\n```\r\n\r\n## DOM2级事件\r\nDOM2级处理事件是在DOM0级处理事件的基础上再添加了一些处理程序。\r\n\r\n- 可以同时绑定多个事件处理函数。\r\n- 定义了 addEventListener 和 removeEventListener 两个方法。\r\n```js\r\nelement.addEventListener(eventName, fn, useCapture)\r\n// 第三个参数 useCapture：指定事件是否在捕获或冒泡阶段执行。布尔值，可选，默认false\r\n// 可能值：true - 事件句柄在捕获阶段执行；false- 默认。事件句柄在冒泡阶段执行\r\n\r\n \r\n \r\nvar btn = document.getElementById('btn')\r\nfunction showFn() { \r\n alert('Hello World')\r\n}\r\nfunction LogFn() { \r\n alert('Hello World')\r\n}\r\n// 同时绑定多个事件处理函数\r\nbtn.addEventListener('click', showFn);\r\nbtn.addEventListener('click', LogFn);\r\n\r\n// 解绑事件 \r\nbtn.removeEventListener('click', showFn); \r\n```\r\n\r\n## DOM3级事件\r\nDOM3级处理事件是在DOM2级处理事件的基础上再添加了很多事件类型。\r\n\r\n- UI事件，当用户与页面上的元素交互时触发，如：`load`、`scroll`\r\n- 焦点事件，当元素获得或失去焦点时触发，如：`blur`、`focus`\r\n- 鼠标事件，当用户通过鼠标在页面执行操作时触发如：`dbclick`、`mouseup`\r\n- 滚轮事件，当使用鼠标滚轮或类似设备时触发，如：`mousewheel`\r\n- 文本事件，当在文档中输入文本时触发，如：`textInput`\r\n- 键盘事件，当用户通过键盘在页面上执行操作时触发，如：`keydown`、`keypress`\r\n- 合成事件，当为IME（输入法编辑器）输入字符时触发，如：`compositionstart`\r\n- 变动事件，当底层DOM结构发生变化时触发，如：`DOMsubtreeModified`\r\n\r\n同时DOM3级事件也允许使用者自定义一些事件。\r\n\r\n\r\n# 事件模型\r\n捕获（从上到下）、冒泡（从下到上）；\r\n\r\n\r\n# 事件流\r\n用户和浏览器做交互的过程中，事件的传递，比如点击左键，怎么传递到页面上的。\r\n\r\n捕获->目标阶段->冒泡\r\n\r\n```html\r\n\r\n\r\n\r\n \r\n 事件冒泡\r\n\r\n\r\n

\r\n 我是父元素\r\n 我是子元素\r\n