2018-08-28日前端面试题

点击查看源码

请描述下原生js的事件。（包括但不限于：事件的不同阶段，应用场景，事件代理，绑定和解绑，浏览器兼容等）

    
        
        
        
    

    
        
请描述下原生js的事件。（包括但不限于：事件的不同阶段，应用场景，事件代理，绑定和解绑，浏览器兼容等）
        

            
js里事件的三个阶段
            
捕获、目标阶段、冒泡阶段
            

                

                    
1.捕获：事件由页面元素接收，逐级向下，到具体的元素
                
                

                    
2.目标：具体的元素本身
                
                

                    
3.冒泡：跟捕获相反，具体元素本身，逐级向上，到页面元素（事件委托通过冒泡实现）
                
            
        
        

            
事件冒泡和事件捕获的应用场景
            
事件代理/事件委托
            
点击下面1、2控制台查看输出
            

                

                    

                        
 1.当存在多个元素可以共用同一个监听器
                    
                
                

                    

                        
 2.用事件委托实现动态监控(根据后台接口返回数据后，js动态插入到页面中的dom，如果不使用事件委托则不起作用)
                    
                
            
            


            
            点击插入数据测试动态监控
        
        

            
事件绑定和解绑
            
事件类型没有on，false 表示在事件第三阶段（冒泡）触发，true表示在事件第一阶段（捕获）触发。 如果handle是同一个方法，只执行一次。
                
ele.addEventListener('click', function(){ }, false); 
                
解绑事件，参数和绑定一样
                
ele.removeEventListener(event.type, handle, boolean);
                

                    

                        
绑定：addEventListener
                    
                    

                        
解绑：removeEventListener
                    
                
        
        

            
    事件绑定兼容问题（主要是兼容可爱的IE）参考：https://www.cnblogs.com/zhangmingze/p/4864367.html
            
attachEvent(event.type, handle ); IE特有，兼容IE8及以下，可添加多个事件处理程序，只支持冒泡阶段
            
addEventListener(event.type, handle, boolean); IE8及以下不支持，属于DOM2级的方法，可添加多个方法不被覆盖
        
        

            
阻止事件行为
            

                

                    
return false; 阻止独享属性（通过on这种方式）绑定的事件的默认事件
                
                

                    
event.preventDefault( ); 阻止通过 addEventListener( ) 添加的事件的默认事件
                
                

                    
event.returnValue = false; 阻止通过 attachEvent( ) 添加的事件的默认事件
                
            
        
    
    

通过css实现左侧2个块宽度固定，高度各50%，右侧宽度自适应

image.png

     
           
           
           
     
     
           

           

           

                sadlfjaflasdjf wdlfjlsad jfl jlwajf lajlasd asdf asdf df as
                sadlfjaflasdjf wdlfjlsad jfl jlwajf lajlasd asdf asdf df as
                sadlfjaflasdjf wdlfjlsad jfl jlwajf lajlasd asdf asdf df as
                sadlfjaflasdjf wdlfjlsad jfl jlwajf lajlasd asdf asdf df as
                sadlfjaflasdjf wdlfjlsad jfl jlwajf lajlasd asdf asdf df as
                sadlfjaflasdjf wdlfjlsad jfl jlwajf lajlasd asdf asdf df as
           
     

this指向问题,输出num,obj,num