什么是事件委托？为什么要用事件委托？
什么是事件委托？
事件委托，又称事件代理，就是将元素的事件处理交由父元素或者祖先元素来代为执行；
事件委托利用了事件冒泡，只指定一个事件处理程序（函数），就可以管理某一类型的所有事件。
例如：我们只需要在document上绑定一个onclick事件，就可以通过事件冒泡的特性来处理一整个页面上所有的onclick事件，而不必给每一个元素去绑定onclick事件；当然这只是举个栗子，我们正常情况下绝对不会这么去做的。
为什么要用事件委托？
在javascript进行事件处理的时候，每个添加到页面上的事件函数都将直接影响页面的整体性能，每一个函数都是一个对象，都会占用内存，而内存中的对象越多，性能就越差。而为了解决这种问题，我们就需要使用事件委托。
事件委托的优点
- 只在内存中开辟了一块空间，节省资源同时减少了dom操作，提升整体性能；
- 在页面中设置事件处理程序的时间大大减少了；
- 对于新添加的元素也会有之前的事件；
- 不需要对事件委托的元素手动移除事件处理程序。
事件委托的使用
为了更深刻的理解事件委托，我们一起来看一个案例吧。
在我们的日常操作中，少不了和增删改查打交道，而在我们给元素添加事件的时候，在没有事件委托时，我们需要获取所有元素并遍历，给每个元素添加一个删除事件。达到删除对应行的效果。
而这种添加事件的方式，很容易导致的问题就是之后追加的元素没有对应的事件。
对于上述的，如在事件绑定之后追加元素的、通过ajax渲染数据等，都可以通过事件委托来实现。
撇开追加元素的逻辑，我们来看看删除事件是怎么添加上的，这样添加事件的结果，就是如上图所示。接着，我们来实现一下事件委托的方式。
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;
}
*/
};
你如何优化自己的代码？
- 命名规范；
- 注释覆盖率50%以上；
- 避免全局变量；
- 避免修改原生API；
- 拆分函数，避免函数过于臃肿；
- 函数专注于做一件事情；
- 模块化封装；
- 组件化开发；
- 对于常量始终保持先定义后使用；
- 对于两个分支的判断，使用三目运算符，对于多个分支的判断使用switch语句；
- 减少DOM操作，减少页面重绘；
- 尽可能使用 === 而不是 ==，避免隐式转换。
什么是盒模型？
在我们的HTML页面中，每一个元素都可以被看成一个盒子，而这个盒子由:内容(content)、内边距(padding)、边框(border)、外边距(margin) 四部分组成。
对于盒模型，分为标准盒模型和怪异盒模型两种。
标准(W3C)盒模型
标准盒模型的范围包括margin、border、padding、content,并且宽高只包含content，不包含其他部分。
怪异(IE)盒模型
怪异盒模型的范围包括margin、border、padding、content,和标准盒模型不同的是，怪异盒模型的宽高包含了padding和border。
在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的元素
