DOM基础事件

鹏zxp

已于 2023-01-24 23:07:01 修改

阅读量305

点赞数 1

文章标签： javascript 前端 html

于 2022-12-07 21:42:18 首次发布

本文链接：https://blog.csdn.net/m0_74229555/article/details/128210382

版权

事件

什么是事件

就是在编程时系统内发生的动作或发生的事情

比如:在网页上单击一个按钮,弹出提示框

事件监听就是程序检测是否有事件产生, 一旦有事件触发,就立即调用一个函数做出响应,称为注册事件

语法

元素.addEventListener('事件', 要执行的函数)

事件监听三要素

事件监听举例

// 获取元素
let btn = document.querySelector('button')
//事件监听
btn.addEventListener('click',function(){
    alert('点击了')
})

注意:

DOM L0

事件源.on事件 = function(){}
DOM L2

事件源.addEVentListener(事件, 事件函数)
发展史:
- DOML0: 是DOM的发展的第一个`版本;
- DOML1: DOM 别于1998年10月日成为w3c标准
- DOML2: 使用addEVentListener注册事件
- DOML3: DOM3级事件模块在DOM2级事件的基础上重新定义了些事件,也添加了一些新的事件类型

1.鼠标事件: 鼠标触发

2.焦点事件: 表单获得光标

3.键盘事件: 键盘触发

4.文本事件: 表单输入触发

事件对象也是个对象，这个对象里有事件触发时的相关信息例如：鼠标点击事件中，事件对象就存了鼠标点在哪个位置等信息

使用场景

2 可以判断用户按下哪个键，比如按下回车键可以发布新闻可以判断鼠标点击了哪个元素，从而做相应的操作

获取事件对象

在事件绑定的回调函数的第一个参数就是事件对象
一般命名为event、ev、e

元素. addEventListener('click', function(e) {
     ....
})

type 获取当前的事件类型

clientX/clientY 获取光标相对于浏览器可见窗口左上角的位置
      
pageX/pageY 获取光标到页面左上角距离
      
key 用户按下的键盘键的值 现在不提倡使用keyCode

关注