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

最新推荐文章于 2021-01-25 18:08:41 发布

原创最新推荐文章于 2021-01-25 18:08:41 发布 · 192 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#兼容

封装方法专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一种封装函数bindEvent的方法，该方法能够统一处理高级浏览器和IE浏览器的事件绑定，确保代码在不同环境下的一致性和兼容性。同时，针对火狐浏览器的鼠标滚轮事件，提供了额外的兼容性解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

<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;
	}
}