js基础知识积累

1. 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)
    }
})
复制代码

2. 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')
复制代码

3. 实现一个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)
    }
}
复制代码