事件总结及解释

最新推荐文章于 2024-07-22 15:13:59 发布

别创我好吗？好的。

最新推荐文章于 2024-07-22 15:13:59 发布

阅读量254

点赞数 1

文章标签： javascript 前端

本文链接：https://blog.csdn.net/weixin_46331286/article/details/123976551

版权

一、事件基础

1.行内事件属性赋值

<button onclick="alert('行内事件属性赋值')">点击按钮</button>

2.事件属性赋值

var btn=document.querySelector('button');
btn.onclick=fuction(){
    alert('事件属性赋值')
}

3.事件监听

//type：事件类型
//listener:监听器（处理程序）
//useCapture:默认为false,设置为true是不会因冒泡触发监听器
const btn = ducment.querySelector('button');
btn.adadEventListener('click',fuction(){
    alert('事件监听')
})

二、鼠标事件

使用事件属性赋值时，变成class1.onxxxx

click；单击鼠标触发。

contextmenu; 右键点击

dbclick; 双击左键触发

mouseenter; 指针移至元素范围内触发一次

mouseleave; 指针移出元素范围外触发移除

mouseover; 指针移至元或其子元素内，可能触发多次

mouseout; 指针移出元素，或者移至其子元素内，可能触发多次

over与out在指针进入子级时会进行触发，无特殊要求下建议使用enter和leave

三、键盘事件

使用事件属性赋值时，变成class1.onxxxx

1.keydown；按下任意键，按住可连续触发

2.keypress;按下按键触发，按住可连续触发，不能监听一些特殊按键（ALT/CTRL/SHIFT/ESC等）

四、键盘事件属性

1.keyCode;返回keypress事件触发的键的值的字符代码，或者keydown或keydown或keyup事件的键盘代码；

字符代码：ASCII字符的数字

键盘代码：键盘上真实键的数字

2.charCode；返回keypress事件触发时按下的字符键的字符Unicode值，用于keydown或keyup时总是返回0

3.key:返回按键标识符（区分大小写）；keypress/keyup/keydown返回值相同

var input = document.querySelector('input')
input.addEvementListener('keydown',fuction(e){
    console.log(e.keyCode);//65
    console.log(e.charCode);//0
    console.log(e.key);//a
})input.addEvementListener('keypress',fuction(e){
    console.log(e.keyCode);//97
    console.log(e.charCode);//97
    console.log(e.key);//a
})input.addEvementListener('keydown',fuction(e){
    console.log(e.keyCode);//65
    console.log(e.charCode);//0
    console.log(e.key);//a
})

五、窗口事件

1.load; 当整个页面都完成加载时，触发load事件

//输出div.box中的文字内容
//方法一
window.addEventListener('load',fuction(){
    console.log(document.querySelector('.box').innerHTML)
})
//方法二
window.onlaod=fuction(){
    console.log(document.querySelector('.box').innerHTML)
}

2.beforeunload； window/document及它们的资源即将卸载时触发。

window.addEventListener("beforeunload",fuction(e){
    var confirmationMessage="confirm close window?"
    //兼容WebKit与非WebKit内核浏览器
    (e||window.event).returnValue=confirmationMessage
    return confirmationMessage
})

3.resize；窗口大小改变时触发

//调整浏览器窗口时，获取可视窗宽高
window.addeventListener("resize",fuction(e){
    console.log(window.innerWidth)//可视窗口宽
    console.log(window.innerHeight)//可视窗口高
})

4.scroll; 元素内发生滚动时触发

//获取滚动条垂直滚动距离
window。addEventListener("scroll",fuction(){
    var myTop= window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop;//兼容写法
console.log(myTop)
})