js事件大全

onload

一个页面只能定义一次，也只会初始化一次

// 写法一
window.onload = ()=>{
    console.log('页面加载完毕')
}

// 写法二
window.onload = load
function load(){
    console.log('页面加载完毕')
}

// 写法三
window.onload = function load(){
    fun()
    fun1()
}
function fun(){
    console.log('执行fun')
}
function fun1(){
    console.log('执行fun1')
}

DOMContentLoaded

当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像和子框架的完全加载。

// 写法一
window.addEventListener = ('DOMContentLoaded',()=>{
    console.log('dom结构加载完成')
})
// 写法二
window.addEventListener = ('DOMContentLoaded',fun1)
const fun1 = ()=>{
    console.log('dom结构加载完成')
}
// 写法三
window.addEventListener = ('DOMContentLoaded',function(){
    console.log('dom结构加载完成')
})

load

与onload用法一致
当页面定义了DOMContentLoaded，load将不会被执行

// 写法一
window.addEventListener = ('load',()=>{
    console.log('load加载完成')
})

onunload\unload

页面卸载时触发此函数

页面离开后触发这个时间非常短可能会无法触发，所以建议用onbeforeunload

// 写法一
window.onunload = ()=>{
    console.log('页面卸载后')
}

// 写法二
window.addEventListener = ('unload',()=>{
    console.log('页面卸载后')
})

onbeforeunload\beforeunload

页面卸载前时触发此函数，表现比onunload好

// 写法一
window.onbeforeunload = ()=>{
    console.log('页面卸载前')
}

// 写法二
window.addEventListener = ('beforeunload',()=>{
    console.log('页面卸载前')
})

onpagehide\pagehide

页面隐藏时触发，本地测试效果不佳，谷歌无论如何都没有触发，火狐刷新时触发

// 写法一
window.onpagehide = ()=>{
    console.log('页面隐藏了')
}

// 写法二
window.addEventListener = ('pagehide',()=>{
    console.log('页面隐藏了')
})

onpageshow\pageshow

页面显示时触发

// 写法一
window.onpageshow = ()=>{
    console.log('页面显示了')
}

// 写法二
window.addEventListener = ('pageshow',()=>{
    console.log('页面隐藏了')
})

onresize\resize

页面可视区域发生变化时触发此函数

// 写法一
window.onresize = ()=>{
    console.log('窗口发生变化了')
}

// 写法二
window.addEventListener('resize', () => {
    console.log('窗口发生变化了')
})

onscroll\scroll

页面滚动条发生变化时触发此函数
无论方向都会触发

// 写法一
window.onscroll = ()=>{
    console.log('页面滚动了')
}

// 写法二
window.addEventListener('scroll', () => {
    console.log('页面滚动了')
})

onerror\error

页面发生错误时调用，返回报错信息，报错文件、报错位置

// 写法一 利用ES6 rest 获取到全部实参
 window.onerror = (...aegus)=>{
        console.log(aegus)
        return true; // 禁用浏览器报错
    }
    a.innerHTML = ""; // 制造问题

// 写法二
window.addEventListener('error', () => {

})

立即执行函数

在js执行上下文阶段，立即执行函数就会执行
当有多个时按加载顺序执行
每个立即执行函数后都需要加分号

// 写法一 
!function(){
    console.log('立即执行函数1')
}();

// 写法二
(()=>{
    console.log('立即执行函数2')
})();

javaScript-location函数

[图片上传失败...(image-551b5a-1653639727037)]

javaScript-element函数

元素自身函数：

元素继承父级的函数（继承自window）：

querySelector\querySelectorAll

全document查询元素
无论是id、class、属性值、标签都可以查

document.querySelector('a') // 查询到第一个a标签
document.querySelector('div["class=dom"]') // 查询到第一个div class值等于dom的元素
document.querySelector('.dom') // 查询到第一个class值等于dom的元素
document.querySelector('#dom') // 查询到第一个id值等于dom的元素

document.querySelectorAll('a') // 查询到全部a标签
document.querySelectorAll('div["class=dom"]') // 查询到全部div class值等于dom的元素
document.querySelectorAll('.dom') // 查询到全部class值等于dom的元素
document.querySelectorAll('#dom') // 查询到全部id值等于dom的元素

javaScript-Element.addEventListener事件

// 示例
element.addEventListener = ('load',()=>{
    console.log('页面加载完成')
})

click\DOMActivate

鼠标点击事件
addEventListener.DOMActivate 方式监听 document.onclick方式 ，document.onclick方式优先

let dom1 = document.querySelector('div')
dom1.onclick = function(){
console.log('优先触发')
}
dom1.addEventListener('DOMActivate',()=>{
console.log('其次触发')
})