前端基础（二十五）：事件

onmousewheel 监听鼠标中键滚动

// Chrome
window.onmousewheel = function (event){
    let e = event || window.event;
    console.log(e);
}
document.addEventListener('mousewheel', function (event){
    let e = event || window.event;
    console.log(e);
})

// Firefox
document.addEventListener('DOMMouseScroll', function (event){
    let e = event || window.event;
    console.log(e);
})

textInput

<input id="input" type="text">
<script>.getElementById('input').addEventListener('textInput', function(event){
        let e = event || window.event;
        console.log(e);
    })</script>

compositionstart compositionupdate compositionend - 输入中文

<input id="input" type="text">
<script>let input = document.getElementById('input');
    
    input.addEventListener('compositionstart', function(event){
        let e = event || window.event;
        console.log('compositionstart', e);
    })

    input.addEventListener('compositionupdate', function(event){
        let e = event || window.event;
        console.log('compositionupdate', e);
    })

    input.addEventListener('compositionend', function(event){
        let e = event || window.event;
        console.log('compositionend', e);
    })</script>

变动事件 MutationEvent - 在DOM被改变时获得通知

为DOM添加 mutation 监听器极度降低进一步修改DOM文档的性能（慢1.5 - 7倍），此外, 移除监听器不会逆转的损害

window.addEventListener('DOMAttrModified', function (event) {
    let e = event || window.event;
    console.log('DOMAttrModified', e);
})

window.addEventListener('DOMAttributeNameChanged', function (event) {
    let e = event || window.event;
    console.log('DOMAttributeNameChanged', e);
})

window.addEventListener('DOMCharacterDataModified', function (event) {
    let e = event || window.event;
    console.log('DOMCharacterDataModified', e);
})

window.addEventListener('DOMElementNameChanged', function (event) {
    let e = event || window.event;
    console.log('DOMElementNameChanged', e);
})

window.addEventListener('DOMNodeInserted', function (event) {
    let e = event || window.event;
    console.log('DOMNodeInserted', e);
})

window.addEventListener('DOMNodeInsertedIntoDocument', function (event) {
    let e = event || window.event;
    console.log('DOMNodeInsertedIntoDocument', e);
})

window.addEventListener('DOMNodeRemoved', function (event) {
    let e = event || window.event;
    console.log('DOMNodeRemoved', e);
})

window.addEventListener('DOMNodeRemovedFromDocument', function (event) {
    let e = event || window.event;
    console.log('DOMNodeRemovedFromDocument', e);
})

window.addEventListener('DOMSubtreeModified', function (event) {
    let e = event || window.event;
    console.log('DOMSubtreeModified', e);
})

右键菜单

window.addEventListener('contextmenu', function (event) {
    let e = event || window.event;
    console.log('contextmenu', e);
})

beforeunload unload

window.addEventListener('beforeunload', function (event) {
    let e = event || window.event;
})
window.addEventListener('unload', function (event) {
    let e = event || window.event;
})

DOMContentLoaded readystatechange

window.addEventListener('DOMContentLoaded', function (event) {
    let e = event || window.event;
    console.log('DOMContentLoaded', e);
})

document.addEventListener('readystatechange', function (event) {
    let e = event || window.event;
    console.log('readystatechange', e);
})

pageshow pagehide

window.addEventListener('pageshow', function (event) {
    let e = event || window.event;
    console.log('pageshow', e);
})

window.addEventListener('pagehide', function (event) {
    let e = event || window.event;
    console.log('pagehide', e);
})

hashchange

location.hash = 'Lee'
window.addEventListener('hashchange', function (event) {
    let e = event || window.event;
    console.log('hashchange', e);
})

自定义事件

var event = document.createEvent('Event');
event.initEvent('build', true, true);
document.addEventListener('build', function (event) {
    let e = event || window.event;
    console.log(e);
});
document.dispatchEvent(event);