小白必看——原生js封装函数解决兼容问题

小白必看——原生js封装函数解决兼容问题

为什么做兼容

浏览器兼容性问题是在实际开发中容易忽略而又最重要的一部分。我们在讲老版本浏览器兼容问题之前，首先要了解什么是能力检测，它是来检测浏览器有没有这种能力，即判断当前浏览器是否支持要调用的属性或者方法。

阻止冒泡事件兼容

function bubble(eve){
        				var  e = eve || window.event;
        			if(e.cancelable){
        				e.cancelable=true;
        			}else{
        				e.stopPropagation();
        			}
        	}

取消事件冒泡有两种方式：

1. 标准的W3C 方式：e.stopPropagation();
   这里的stopPropagation是标准的事件对象的一个方法，调用即可（谷歌和火狐支持,IE不支持）
2. 非标准的IE方式:window.event.cancelBubble=true; 这里的cancelBubble是
   IE事件对象的属性，设为true就可以了（IE特有的,谷歌支持,火狐不支持）

事件源兼容

function fn(eve){
				 var  e=eve|| window.event;
				 e.target ||e.srcElement;
			}

键盘的兼容

document.onkeypress=function(eve){
	  	var  e=eve|| window.event;
	      	 e.keyCode||e.which;
	   }

绑定2级事件监听兼容

function add(eve){
					var  e=eve|| window.event;
				if(e.addEventListener){
					return e.addEventListener(事件,事件处理函数,false );
				}else{
					e.attachEvent("on"+事件,事件处理函数)
				}
			}

事件监听移除

if (e.removeEventListener){
				e.removeEventListener(事件,事件处理函数,false)
			}else{
				e.detachEvent("on"+事件,事件处理函数);
			}

阻止默认事件

function stop(eve){
			var  e=eve|| window.event;
			 if(e.preventDefault){
			 	e.preventDefault()
			 }else{
				 e.returnValue=false;
			 }
		}

事件委托的封装

oul.onclick=fn(achild,callback);		
        function fn(achild,callback){
    		  return function(eve){
    					var  e=eve|| window.event;
    					//事件源的兼容
    					var target=eve.target||eve.srcElement;
    					for(var i=0;i<achild.length;i++){
    						if(child===target){
    							callback.bind(target)();   //把自身绑定到事件源返回，此时回调函数的this就是事件源
    						   }
    			    	}
    			}
    	}

事件委托就是利用冒泡的原理，把事件加到父级上，通过判断事件来源的子集，执行相应的操作，事件委托首先可以极大减少事件绑定次数，提高性能；其次可以让新加入的子元素也可以拥有相同的操作。

这里封装的代码仅供参考，可直接拿入测试