个人网站需要那些,网站建站行业,8元一年虚拟云主机,桂林网站优化公司DOM事件基础
事件监听事件类型事件对象 一.事件监听
① 概念#xff1a;就是让程序检测是否有事件发生#xff0c;一旦有事件触发#xff0c;就立即调用一个函数做出响应#xff0c;也成为绑定事件或者注册事件
② 语法#xff1a;元素对象.addEventListener(事件类型就是让程序检测是否有事件发生一旦有事件触发就立即调用一个函数做出响应也成为绑定事件或者注册事件
② 语法元素对象.addEventListener(事件类型 要执行的函数)
③ 事件监听三要素 1事件源哪个DOM元素被事件触发了要获取dom元素 2事件类型用什么方式触发比如鼠标单击click, 鼠标经过 mouseover等 3事件调用的函数要做什么事
④ 注意
事件类型要加引号函数是触发一次就执行一次
const btn document.querySelector(button)btn.addEventListener(click, function() {alert(你好呀)
})
⑤ 事件监听版本拓展 DOM L0 事件源.on事件 function(){} DOM L2 事件源.addEventListenner(事件事件处理函数)
区别 on 方式会被覆盖addEventListenner 方式可绑定多次拥有事件更多特性推荐使用
二.事件类型
① 鼠标事件鼠标触发
click 鼠标点击mouseenter 鼠标经过mouseleave 鼠标离开
const div document.querySelector(div)
// 鼠标经过
div.addEventListener(mouseenter, function () {console.log(hello)
})
// 鼠标离开
div.addEventListener(mouseleave, function () {console.log(走了)
})
② 焦点事件表单获得光标
focus 获得焦点blur 失去焦点 // 获得焦点和失去焦点
const input document.querySelector(input)
input.addEventListener(focus, function () {console.log(获得焦点)
})input.addEventListener(blur, function () {console.log(失去焦点)
})
③ 键盘事件键盘触发
keydown 键盘按下触发keyup 键盘抬起触发
const input document.querySelector(input)
input.addEventListener(keydown, function () {console.log(键盘按下)
})
input.addEventListener(keyup, function () {console.log(键盘弹起)
})
④ 文本事件表单输入触发
input 用户输入事件
const input document.querySelector(input)
input.addEventListener(input, function () {console.log(input.value)
}) 三.事件对象 1.获取事件对象 2.事件对象常用属性
3.1 获取事件对象
① 事件对象概念
也是个对象这个对象有事件触发时的相关信息
② 使用场景
可以判断用户按下哪个键或者点击了哪个元素
③ 如何获取
在事件绑定的回调函数的第一个参数就是事件对象一般命名为eventev e ④ 语法
元素.addEventListener(click, function(e) {
})
3.2 事件对象属性
type 获取当前的事件类型clientX/clientY 获取光标相对于浏览器可见窗口左上角的位置offsetX/offsetY 获取光标相对于DOM元素左上角的位置key 用户按下的键盘键的值不推荐
四.环境对象
环境对象指的是函数内部特殊的变量this,代表当前函数运行时所处的环境作用弄清楚this的指向可以使代码更加简洁函数的调用方式不同this指代的对象也不同【粗略规则】谁调用this就指向谁
五.回调函数
① 概念如果将函数A作为参数传递给函数B时将函数A称为回调函数
② 使用匿名函数作为回调函数比较常见
