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