pc端兼容

一、事件

addEventListener 事件注册

ie9+才支持

function setEventListener (ele, fn, eventName, bol) {
	// 如果支持这个方法, 会返回函数, 函数转布尔值是true; 不支持返回undefined
	if(ele.addEventListener) {
		ele.addEventListener(eventName, fn, bol);
	} else if (ele.attachEvent) {
		ele.attachEvent('on' + eventName, fn);
	} else {
		// 中括号里可以写变量和直接量(1912)
		ele['on'+eventName] = fn
	}
}

事件对象event

一般浏览器会将事件对象, 传递到事件处理函数中. 但是, 早期ie(8都不支持)浏览器, 不会传递, 它会将事件对象绑定到window对象上, window.event

var lis = document.querySelector('li');
for(var i = 0; i < lis.length; i++){
	event = event || window.event; // 或运算, 如果第一个是true, 就能确定结果了, 就不会看第二个, 就是envet; 如果没有event, 那第一个就是false, 就是第二个, window.event
}

事件对象的target属性(事件目标)

ie8及以前, 事件对象都没有target属性, 而是用srcElement属性

// 兼容性函数 (此处传入的event也是经过兼容性处理过的, event =  event || window.event)
function getTarget(event) {
	if(event.target){
		return event.target;
	}else {
		return event.srcElement;
	}
}
// 使用
var lis = document.querySelector('li');
for(var i = 0; i < lis.length; i++){
	event = event || window.event; 
	console.log(event.target.innerText);
	console.log(event.srcElement.innerText);
	var target = getTarget(event);
	console.log(target.innerText)
}

事件方法event.stopPropagation() 阻止冒泡和捕获

ie8及以前的浏览器不能使用, 而是用event.cancleBubble = true

// 兼容阻止事件传播的方法
function stopProp(event){
	if (event.stopPropagation) {
		event.stopPropagation;
	} else {
		event.cancelBubble = true;
	}
}
// 使用
var divs = document.getElementsByTagName('div');
for(var i = 0; i < divs.length; i++) {
	divs[i].onclick = function(event) {
		event = event || window.event;
		stopProp(event);
	}
}

二、DOM阶段

innerText 获取元素的内容

早期火狐没有, 用textContent代替

// 获取内容
function getText(ele) {
	// 如果元素的内容是空, ele.innerText获取的是'', 转换成布尔是false, 所以不能直接用ele.innerText作为判断条件, 而是它返回值的类型是否是字符串. 如果支持这个方法, 必定返回string类型, 如果不支持这个方法, 返回的是undefined.
	if( typeof ele.innerText === 'string') {
		return ele.innerText;
	} else {
		return ele.textContent;
	}
}

// 设置内容
function setText(ele, str) {
	if(typeof ele.innerText === 'string') {
		ele.innerText = str;
	} else {
		ele.textContent = str;
	}
}

children 获取子元素们

在早期的浏览器当中, 会返回注释节点

// ele是父节点
function getChildElement(ele) {
	var childs = ele.childNodes; // 获取所有子节点
	var arr = []; // 存放元素节点
	for(var i = 0; i < childs.length; i++) {
		if(childs[i].nodeType == 1) { // 判断哪些是子元素
			arr.push(childs[i]) // 将子元素添加到arr里面
		}
	}
	return arr;
}

nextElementSibling 下一个兄弟元素

ie8及以前版本不支持

// 封装兼容性方法
function getNextElementSibling(ele) {
	// 先找到下一个兄弟节点
	var next = ele.nextSibling;
	// 判断next是不是null(有没有下一个兄弟节点了, 如果有, 就判断是不是元素, 如果没有, 就直接return, 并返回个null)
	if (next == null) {
		return null; 
	}
	// 判断next是不是元素
	if (next.nodeType == 1) {
		return next;
	} else {
		// 如果不是元素, 就递归继续往后面找
		return getNextElementSibling(next);
	}
}

firstElementChild 第一个子元素

function getFirstElementChild(ele) {	
	// 方法一 调用上面的找子元素们的方法
	// var childElements = getChildElement(ele);
	//  retrun childElements[0]

	// 正经独立方法
	for(var i = 0; i < ele.childNodes.length; i++) {
		if(ele.childNodes[i].nodeType == 1) {
			return ele.childNodes[i];
		}
	}
	return null;
}