前端常见面试题（十一）@郝晨光

---

什么是事件委托？为什么要用事件委托？

什么是事件委托？

事件委托，又称事件代理，就是将元素的事件处理交由父元素或者祖先元素来代为执行；
事件委托利用了事件冒泡，只指定一个事件处理程序（函数），就可以管理某一类型的所有事件。
例如：我们只需要在document上绑定一个onclick事件，就可以通过事件冒泡的特性来处理一整个页面上所有的onclick事件，而不必给每一个元素去绑定onclick事件；当然这只是举个栗子，我们正常情况下绝对不会这么去做的。

为什么要用事件委托？

在javascript进行事件处理的时候，每个添加到页面上的事件函数都将直接影响页面的整体性能，每一个函数都是一个对象，都会占用内存，而内存中的对象越多，性能就越差。而为了解决这种问题，我们就需要使用事件委托。

事件委托的优点

1. 只在内存中开辟了一块空间，节省资源同时减少了dom操作，提升整体性能；
2. 在页面中设置事件处理程序的时间大大减少了；
3. 对于新添加的元素也会有之前的事件；
4. 不需要对事件委托的元素手动移除事件处理程序。

事件委托的使用

为了更深刻的理解事件委托，我们一起来看一个案例吧。
在我们的日常操作中，少不了和增删改查打交道，而在我们给元素添加事件的时候，在没有事件委托时，我们需要获取所有元素并遍历，给每个元素添加一个删除事件。达到删除对应行的效果。
而这种添加事件的方式，很容易导致的问题就是之后追加的元素没有对应的事件。
对于上述的，如在事件绑定之后追加元素的、通过ajax渲染数据等，都可以通过事件委托来实现。

未进行事件委托.gif

撇开追加元素的逻辑，我们来看看删除事件是怎么添加上的，这样添加事件的结果，就是如上图所示。接着，我们来实现一下事件委托的方式。

    let myTable = document.getElementById('table');
    let myTBody = myTable.getElementsByTagName('tbody')[0];
    let myBtn = document.getElementById('btn');
    let delBtns = myTBody.getElementsByTagName('button');
    let id = 2;

    for(let i = 0; i < delBtns.length; i++) {
        delBtns[i].onclick = function() {
            let tr = this.parentNode.parentNode;
            myTBody.removeChild(tr);

        }
    }

事件委托的实现

将button的事件代理到table上，在事件处理程序内部通过event事件对象的target属性配合switch语句来确保当前点击的是button，当点击button的时候，执行删除操作；这里用switch的原因是为了还可以再同时判断多个target
当然了，实际使用的时候，我们一般不使用target.tagName，因为直接使用标签名容易导致冲突，所以我们实际使用时一般都使用className来进行判断

    myTable.onclick = function(e) {
        let event = e || window.event;
        let target = event.target || event.srcElement;
        let tagName = target.tagName;
        switch (tagName) {
            case 'BUTTON':
                let myTr = target.parentNode.parentNode;
                myTr.parentNode.removeChild(myTr);
                break;
            default:
                break;
        }
     /*  假设当前删除按钮的类名为del
         let className = target.className;
         switch (className) {
            case 'del':
                let myTr = target.parentNode.parentNode;
                myTr.parentNode.removeChild(myTr);
                break;
            default:
                break;
        }
      */
    };

事件委托.gif

---

你如何优化自己的代码？

1. 命名规范；
2. 注释覆盖率50%以上；
3. 避免全局变量；
4. 避免修改原生API；
5. 拆分函数，避免函数过于臃肿；
6. 函数专注于做一件事情；
7. 模块化封装；
8. 组件化开发；
9. 对于常量始终保持先定义后使用；
10. 对于两个分支的判断，使用三目运算符，对于多个分支的判断使用switch语句；
11. 减少DOM操作，减少页面重绘；
12. 尽可能使用 === 而不是 ==，避免隐式转换。

---

什么是盒模型？

在我们的HTML页面中，每一个元素都可以被看成一个盒子，而这个盒子由:内容(content)、内边距(padding)、边框(border)、外边距(margin) 四部分组成。
对于盒模型，分为标准盒模型和怪异盒模型两种。

标准(W3C)盒模型

标准盒模型的范围包括margin、border、padding、content,并且宽高只包含content，不包含其他部分。

标准盒模型.png

怪异(IE)盒模型

怪异盒模型的范围包括margin、border、padding、content,和标准盒模型不同的是，怪异盒模型的宽高包含了padding和border。

IE盒模型.png

在css3中，我们可以通过box-sizing属性来修改元素的盒模型。

div {
    box-sizing: border-box;  // 怪异盒模型
    box-sizing: content-box;  // 标准盒模型
}

---

行内、块元素、空元素分别举例

块级元素

div、p、ul、ol、dl、li、dt、dd、form、h1、h2、h3、h4、h5、h6、table、thead、tbody、tfoot
H5新增
header、main、footer、aside、article、address、blockquoke、audio、video、section···

行内元素

span、a、b、u、i、label、em、strong、del、sub、sup、code

行内块元素

img、input、button

空元素

br、meta、hr、link

---

src和href的区别

首先看一下使用src属性的元素和使用href属性的元素：
使用src的元素

1. <img src="haochenguang.png" />
2. <iframe src="home.html"><iframe>
3. <script src="index.js"></script>

使用href的元素

1. <link href="app.css" />
2. <a href="https://baidu.com">百度一下</a>

接着，我们来对比一下这些标签的区别：

1. 使用src属性的元素，例如img、iframe、script，如果src路径出现问题的话，页面的内容会受到影响，用户没有办法看到页面本来应该显示的内容和使用页面应该实现的功能。
2. 使用href属性的元素，例如link、a,如果href路径出现问题的话，页面不会有很大的影响，对于样式文件来说，只是影响页面的美观度，而不会影响页面的正常浏览和使用，对于超链接来说，只是页面无法与其它页面建立链接，对当前页面的影响也不大。

由此，我们可以总结：

src表示引用资源，是页面不可少的一部分，它会替换掉当前的元素，而href是关联，是将当前页面与指定资源建立链接。

---

如果本文对您有帮助，可以看看本人的其他文章:
前端常见面试题（十）@郝晨光
前端常见面试题（九）@郝晨光
前端常见面试题（八）@郝晨光

结言

感谢您的查阅，本文由郝晨光整理并总结，代码冗余或者有错误的地方望不吝赐教；菜鸟一枚，请多关照