Skip to content

DOM2兼容处理重复问题 #59

@Yangxiaqing

Description

@Yangxiaqing

重复问题:IE6~8可以给同一个元素的同一个行为绑定多个相同的方法

/*
 *bind:处理DOM2级事件绑定的兼容性问题(绑定方法)
 *@parameter:
 * curEle:要绑定事件的元素
 * eventType:要绑定的事件类型("click"、"mouseover"...)
 * eventFn:要绑定的方法
 */

function bind(curEle, eventType, eventFn) {
	if ("addEventListener" in document) {
		curEle.addEventListener(eventType, eventFn, false);
		return;
	}
	//(解决this问题)
	//给eventFn化妆(解决this问题),并且把化妆前照片的贴在自己身上
	var tempFn = function () {
		eventFn.call(curEle);
	};
	tempFn.photo = eventFn;

	//首先判断该自定义属性之前是否存在,
	//不存在的话创建一个,由于要存储多个方法化妆后的结果,所有我们让其值是一个数组
	if (!curEle["myBind" + eventType]) {
		curEle["myBind" + eventType] = [];
	}

	//解决重复问题:
	//每一次自己在往自定义属性对应的容器中添加前,看一下之前是否已经有了
	//有的话就不用再重新的添加了
	//同理也不需要往事件池中存储了
	
	var ary = curEle["myBind" + eventType];
	for (var i = 0; i < ary.length; i++) {
		var cur = ary[i];
		if (cur.photo === eventFn) {
			return;
		}
	}

	ary.push(tempFn);

	curEle.attachEvent("on" + eventType, tempFn);
}

function unbind(curEle, eventType, eventFn) {
	if ("removeEventListener" in document) {
		curEle.removeEventListener(eventType, eventFn, false);
		return;
	}
	//拿event到curEle["myBind"]这里面找化妆后的结果,
	//找到之后在事件池中把化妆后的结果给移除事件池
	var ary = curEle["myBind" + eventType];
	for (var i = 0; i < ary.length; i++) {
		var cur = ary[i];
		if (cur.photo === eventFn) {
			ary.splice(i,1);//找到后,把自己存储的容器中对应的移除掉
			curEle.detachEvent("on" + eventType, cur);//再把事件池中对应的也移除掉
			break;
		}
	}
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions