js基礎知識積累

js 事件委託

事件冒泡（從觸發事件的dom到window），事件捕獲(從window到觸發事件的dom)

/*
 * @param event {string} 必須。事件名
 * @param function 必須。指定要事件觸發時執行的函式
 * @param useCapture {bool} 可選。false: 預設值，冒泡階段, true: 捕獲階段
*/
element.addEventListener(event, function, useCapture)

複製程式碼

為動態建立的元素繫結點選事件

// 給 id 為 ul 的元素新增 5個 li 元素
let ul = document.getElementById('ul')
for(let i=0; i<5; i++){
    let liDOM = document.createElement('li')
    liDOM.innerHTML = i
    ul.append(liDOM)
}
// 將 li 的點選事件委託到 ul
ul.addEventListener('click', function(event) {
    const currentDOM = event.target
    if (currentDOM.tagName === 'LI') {
        console.log(currentDOM.innerHTML)
    }
})
複製程式碼

ajax 請求的五個步驟

// 1. 建立 xhr 物件
let xhr
if (window.XmlHttpRequest) {
    xhr = new XmlHttpRquest()
} else {
    xhr = new ActiveXObject('Microsoft.XMLHTTP')
}
// 2. 設定回撥函式
xhr.onReadyStateChange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
        console.log(xhr)
        // 獲得字串形式的響應資料
        console.log(xhr.responseText)
    }
}
// get
// 3. open
xhr.open('get', '/test.php', true)
// 4. send
xhr.send()
// post
// 3. open(請求方式， 請求url, 是否非同步)
xhr.open('post', '/test.php', true)
// 4. setRequestHeader(請求頭名稱，請求頭地址)
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded')
// 5. send(string) string: 僅用於Post請求
xhr.send('fname=Henry&lname=Ford')
複製程式碼

實現一個EventEmitter(釋出訂閱)

class EventEmitter {
    constructor() {
        this._events = {}
    }
    // 釋出
    emit(eventName) {
        let args = [].slice.call(arguments, 1)
        if (this._events[eventName]) {
            this._events[name].forEach(callback => {
                callback.apply(this, args)
            })
        }
    }
    // 訂閱
    on(eventName, callback) {
        (this._events[eventName] || this._events[eventName] = []).push(callback)
    }
}
複製程式碼

js基礎知識積累

相關文章