目录：
1、什么是事件委托？为什么要用事件委托？
2、你如何优化自己的代码？
3、什么是盒模型？
4、行内、块元素、空元素分别举例
5、src和href的区别

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

js事件委托就是利用冒泡的原理，把本应该添加到某个元素上的事件委托给他的父级，从而减少DOM交互达到网页优化

var oUl = document.getElementById("newsList");    
//获取ul
oUl.onclick = function(e){
            //只有点击li时才会触发相应代码执行
            var evt = e || event;                
            var _target = evt.target || evt.srcElement; 
            if(_target.nodeName.toUpperCase() == "LI"){     
                console.log(_target.innerHTML);         
            }
        }            
        /*nodeName 属性可依据节点的类型返回其名称。
        如果节点是一个元素节点 , nodeName 属性将返回标签名。
        如果节点是一个属性节点， nodeName 属性将返回属性名。
        其他节点类型, nodeName 属性将返根据不同的节点类型返回不同的节点名称。
         toUpperCase() 转为小写
        */

冒泡：冒泡事件就是document到触发事件的那个节点一层层向下捕获直至事件源然后一层层向上冒泡，利用这个冒泡机制减少DOM操作，有一点要注意就是onclick不支持捕获事件，另有其他写法如下：

oBox.addEventListener("click",function(){
     console.log("click");
},false);

这种写法又叫做为DOM2级事件处理。

添加事件监听器：addEventListener(事件名，处理函数，布尔值)

移除事件监听器：removeEventListener(事件名，处理函数)

注意：事件名不带on。
第一个值是事件名，第二个是处理函数，第三个布尔值，默认为false事件句柄在冒泡阶段执行，改为true的时候事件句柄在捕获阶段执行。这两个事件相同，但是在IE中不支持这两个属性，

IE下的事件监听器：attachEvent(事件名，处理函数)，detachEvent(事件名，处理函数)
注意：事件名带on。

有事件冒泡就有组织冒泡，阻止冒泡即不让事件一层层向上触发。以下方法可以阻止事件冒泡。

1、return false ；

2、preventDefault();

3、window.event.cancelBubble = true;

2、你如何优化自己的代码？

1、如果只有两个分支的判断，推荐使用三目运算做判断

let val = "JW";
val == "jw" ? console.log(true) : console.log(false);

2、如果只有一个判断的时候，可以用if(){}

let a=1;
if(a===1) console.log('OK')

3、如果有很多判断的时候，会有很多分支的时候，推荐使用switch做判断。

let day = new Date().getDay();
switch (day) {
  case 0:
    yy = "今天是星期天";
    break;
  case 1:
    yy = "今天是星期一";
    break;
  case 2:
    yy = "今天是星期二";
    break;
  case 3:
    yy = "今天是星期三";
    break;
  case 4:
    yy = "今天是星期四";
    break;
  case 5:
    yy = "今天是星期五";
    break;
  case 6:
    yy = "今天是星期六";
    break;
}
console.log(yy);

4、如果value的值为"",null,undefind,0,则执行判断

 var value = 0;
 if(!value) console.log(11);//11

5、 判断为true则执行判断

(value < 1) && console.log(22);//22

6、判断为false则执行判断

 (value < －1) || console.log(33);//33

更多的参考：https://blog.csdn.net/HangMine/article/details/78828821

3、CSS盒子模型

所有HTML元素可以看作盒子 CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括内容(content)、内边距(padding)、边框(border)、外边距(margin)，

盒子模型有两种形式：标准盒子模型，怪异盒子模型（IE盒模型）

image

可以看到，在标准盒模型下，width和height是内容区域即content的width和height。而盒子总宽度为
在标准模式下，一个块的总宽度= width + margin(左右) + padding(左右) + border(左右)

image

而IE盒模型或怪异盒模型显而易见的区别就是，width和height除了content区域外，还包含padding和border。盒子的总宽度为
一个块的总宽度= width + margin(左右)（即width已经包含了padding和border值）

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

行内元素：

a, b, span, img, input, strong, select, label, em, button, textarea

块级元素：

div, ul, li, dl, dt, dd, p, h1-h6, blockquote

空元素：

br, meta, hr, link, input, img

5、src和href的区别

href标识超文本引用，用在link和a等元素上，href是引用和页面关联，是在当前元素和引用资源之间建立联系

浏览器解析到这一句的时候会识别该文档为css文件，会下载并且不会停止对当前文档的处理，这也是为什么建议使用link方式来加载css而不是使用@import。

src表示引用资源，表示替换当前元素，用在img，script，iframe上，src是页面内容不可缺少的一部分。

当浏览器解析到这一句的时候会暂停其他资源的下载和处理，直至将该资源加载，编译，执行完毕，图片和框架等元素也是如此，类似于该元素所指向的资源嵌套如当前标签内，这也是为什么要把js饭再底部而不是头部。

区别就是，引入和引用。