前端常见面试题一

1.元素js的事件委托

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

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

冒泡：冒泡事件就是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.src和href的区别

href标识超文本引用，用在link和a等元素上，href是引用和页面关联，是在当前元素和引用资源之间建立联系
浏览器解析到这一句的时候会识别该文档为css文件，会下载并且不会停止对当前文档的处理，这也是为什么建议使用link方式来加载css而不是使用@import。
src表示引用资源，表示替换当前元素，用在img，script，iframe上，src是页面内容不可缺少的一部分。
当浏览器解析到这一句的时候会暂停其他资源的下载和处理，直至将该资源加载，编译，执行完毕，图片和框架等元素也是如此，类似于该元素所指向的资源嵌套如当前标签内，这也是为什么要把js放在底部而不是头部。