封装二级绑定事件中兼容高级浏览器与ie浏览器

清疚 2021-09-02 10:10 331阅读 0赞

<div id="box"></div>
    	<script type="text/javascript">
    	// 获取元素
    	var box = document.getElementById("box");
    
    
    	// 封装一个函数，用于解决高级浏览器中和IE中绑定事件统一的方
    
    	/**
    	 * bindEvent方法 兼容多个浏览器之间事件绑定方式
    	 * @dom 要绑定事件元素
    	 * @type 事件的类型
    	 * @fn 执行事件函数
    	 **/
    	function bindEvent(dom, type, fn) {
    		// 利用能力检测
    		// 能力检测就是当一个对象去读取一个属性的时候，如果读取到就直接输出， 如果没有获取到，会输出undefined，而不是报错的这个特点
    		if (dom.addEventListener) {
    			// DOM2级绑定事件方式
    			dom.addEventListener(type, fn, false);
    		} else if (dom.attachEvent) {
    			// 是IE浏览器
    			dom.attachEvent("on" + type, fn);
    		} else {
    			// 一些不知名的浏览器
    			// 使用dom0级绑定方式
    			dom["on" + type] = fn;
    		}
    	}
    
    	// 测试
    	bindEvent(box, "click", function() {
    		console.log("事件执行了");
    	});

鼠标滚轮事件兼容火狐

// 定义一个函数，通过该函数可以实现多个浏览器事件绑定的方式
    function bindEvent(dom, type, fn) {
    	// 判断type的类型
    	if (type === "mousewheel") {
    		// 判断浏览器信息
    		var isFF = window.navigator.userAgent.indexOf("Firefox") >= 0 ? true : false;
    		// console.log(isFF);
    
    		// 判断是否是火狐
    		if (isFF) {
    			// 火狐中的鼠标滚轮事件绑定方式
    			dom.addEventListener("DOMMouseScroll", fn, false);
    			return;
    		}
    	}
    
    	// 利用能力检测
    	if (dom.addEventListener) {
    		dom.addEventListener(type, fn, false);
    	} else if (dom.attachEvent) {
    		dom.attachEvent("on" + type, fn);
    	} else {
    		// 通过dom0级绑定
    		dom["on" + type] = fn;
    	}
    }