文章目录
- 事件
- 事件类型
- 事件监听
- 定义
- 使用
- 事件对象
- 定义
- 使用
- 常用属性
- 环境对象
- 回调函数
事件
事件类型
- 鼠标触发:click(鼠标点击)、mouseenter(鼠标经过)、mouseleave(鼠标离开)
- 表单获得光标:foucs(获得焦点)、blur(失去焦点)
- 键盘触发;Keydown(键盘按下触发)、Keyup(键盘抬起触发)
- 表单输入触发:input(用户输入事件)
事件监听
定义
就是让程序检测是否有事件产生,一旦有事件触发,就立即调用一个函数做出响应,也称为绑定事件或者注册事件
使用
语法:元素对象.addEventListener('事件类型',要执行的函数)
事件监听三要素:
- 事件源:哪个dom元素被事件触发了,要获取dom元素
- 事件类型:用什么方式触发
- 事件调用的函数:要做什么事
例如:
<button></button>
<script>
const btn = document.querySelector('.btn')
btn.addEventListener('click',function() {
alert('点击了')
})
</script>
注意:
- 事件类型要加引号
- 函数是点击之后再去执行,每次点击都会执行一次
事件对象
定义
也是一个对象,这个对象里有事件触发时的相关信息
在事件绑定的回调函数的第一个参数就是事件对象,如下面语法中的e
使用
语法:元素.addEventListener('click',function(e){})
常用属性
- type:获取当前的事件类型
- clientX/clientY:获取光标相对于浏览器可见窗口左上角的位置
- offsetX/offestY:获取光标相对于当前DOM元素左上角的位置
- key:用户按下的键盘键的值
环境对象
指的是函数内部特殊的变量this,它代表着当前函数运行时所处的环境
作用:可以让代码更简洁
函数的调用方式不同,this指代的对象也不同
粗略规则:谁调用,this就是谁
例如:
<button>点击</buton>
<script>
//每个函数里面都有this环境对象,普通函数里面的this指向的是window
function fn() {
console.log(this)
}
const btn = document.querySelector('button')
btn.addEventListener('click',function(){
console.log(this)//this是btn
this.style.color = 'red'
})
回调函数
如果将函数A作为参数传递给函数B时,称函数A为回调函数
例如:
function fn() {
console.log('回调函数')
}
//fn传递给了setInterval,fn就是回调函数
setInterval(fn,100)