webAPI學習第四天-創建元素的三種方式

上課有些地方沒有聽懂,只好照着筆記寫一遍增強記憶了(｡･∀･)ﾉﾞ

創建元素的三種方式

document.write()

document.write('新設置的內容<p>標籤也可以生成</p>');

innerHTML

var box = document.getElementById('box');
box.innerHTML = '新內容<p>新標籤</p>';

document.createElement()

var div = document.createElement('div');
document.body.appendChild(div);

性能問題

1. innerHTML方法由於會對字符串進行解析，需要避免在循環內多次使用。
2. 可以藉助字符串或數組的方式進行替換，再設置給innerHTML
3. 優化後與document.createElement性能相近

事件詳解

註冊/移除事件的三種方式

var box = document.getElementById('box');
box.onclick = function () {
 console.log('點擊後執行');
};
box.onclick = null;

box.addEventListener('click', eventCode, false);
box.removeEventListener('click', eventCode, false);

box.attachEvent('onclick', eventCode);
box.detachEvent('onclick', eventCode);

function eventCode() {
 console.log('點擊後執行');
}

兼容代碼

function addEventListener(element, type, fn) {
 if (element.addEventListener) {
   element.addEventListener(type, fn, false);
} else if (element.attachEvent){
   element.attachEvent('on' + type,fn);
} else {
   element['on'+type] = fn;
}
}

function removeEventListener(element, type, fn) {
 if (element.removeEventListener) {
   element.removeEventListener(type, fn, false);
} else if (element.detachEvent) {
   element.detachEvent('on' + type, fn);
} else {
   element['on'+type] = null;
}
}

溫故而知新!!