TB面试题-全局变量和它的作用域&事件冒泡&事件委托

1、全局变量和它的作用域

<script> 
    window.onload = function(){
    	//淘宝的面试题
		//全局变量和局部变量同名的时候 ，全局变量的作用域不包含同名局部变量的作用域
		//全局变量和局部变量不同名的时候 ，全局变量作用域是整 个程序
		var a = 10;    //全局
		function f1(){    
		    var b = 2 * a;    //NAN   a 变量提升  此时的a为undefined
		    var a = 20; //局部
		    var c = a+1;    //   21
		    console.log(b);  //NAN  
			console.log(c);    //21
		}    
		f1()

	}
  </script>

// JS预解析 var a; a = 10
	var a = 10;
	var obj = {
		a:90,
		f: test
	}
	function test(){
		console.log(a) // undefined
		a=100;
		console.log(this.a) // 90
		var a;
		console.log(a) // 100
	}
	obj.f()

2、事件冒泡

<div id="d1">1
    <div id="d2">2
      <div id="d3">3</div>
    </div>
</div>

<script> 
    window.onload = function(){
      //事件冒泡
      document.getElementById("d1").onclick = function(e){
        console.log('d1'); // d1
      };
      document.getElementById("d2").onclick = function(e){
        console.log('d2'); //d2 d1
      };
      document.getElementById("d3").onclick = function(e){
        event.stopPropagation();//阻止事件冒泡
        console.log('d3'); //d3
      };
    }
</script>

3、事件委托

<div>
	<ul id="list">
	  <li>111</li>
	  <li>222</li>
	  <li>333</li>
	  <li>444</li>
	</ul>
</div>

实现方式：
3.1 事件触发

<script>
    window.onload = function(){
 		//事件触发
		var list = document.getElementById("list");
		var li = list.getElementsByTagName('li');
		for(var i=0;i<li.length;i++){
		    li[i].onclick = function(){
		        console.log(this.innerHTML);
		    }
		}
	}
</script>

3.2 事件委托实现

<script>
    window.onload = function(){
    	//事件委托实现
    	var list = document.getElementById("list");
 		list.onclick = function(e){
        	var e = e || window.event;
	        e.target = e.target || e.srcElement;   //e.target当前触发节点
	        //console.log('123');
	        if(e.target.nodeName.toLowerCase()=='li'){    
	          console.log(e.target.innerHTML)
	        }
      }
	}
</script>

3.3 事件委托实现2
点击btn显示隐藏，点击其它区域隐藏详细

<div id='btn'>
    <span>查看详情</span>
    <div id="info">
      详细信息展示
    </div>
</div>

<script>
    window.onload = function(){
    	//事件委托2
	    var info = document.getElementById('info');
	    document.body.onclick = function(e){
	      var e = e || window.event;
	      e.target = e.target || e.srcElement;
	
	      if(e.target.id=="btn"){
	        if(info.style.display == "none" || info.style.display =='' ){
	          info.style.display = "block"
	        }else{
	          info.style.display ="none"
	        }
	      }else {
	        info.style.display = "none"
	      }
	    };
	}
</script>