JavaScript-事件监听

事件监听

时间是在编程时系统内发生的动作或发生的事情，比如在网页上单机一个按钮

就是让程序检测是否有事件产生。一旦有事件触发，就立即调用一个函数做出响应也称为绑定事件或注册事件。比如鼠标经过显示下拉菜单，比如点击可以播放轮播图等等。

语法：

元素对象.addEventListener（'事件类型'，执行函数）；

事件监听三要素：

• 事件源：那个dom元素被事件触发了，要获取dom元素
• 事件类型：用什么方式触发，比如鼠标单机click，鼠标经过mouseover等
• 事件调用的函数：要做什么事情

<button>按钮</button>
<script>
	const btn = document.querySelector('button');
    btn.addEventListener('click',
                         function(){console.log('点击了按钮')});
</script>

事件类型：

• 鼠标事件：鼠标触发
  • click：鼠标点击
    • 元素对象可以直接调用==click()==函数实现点击事件
  • mouseenter：鼠标经过
  • mouseleave：鼠标离开
• 焦点事件：表单获得光标
  • focus：获得焦点
  • blur：失去焦点
• 键盘事件：键盘触发
  • keydown：键盘按下触发
    • 函数传入一个参数可获得按下按键的对象
  • keyup：键盘抬起触发
• 文本事件
  • input：用户输入事件
    • value：获取输入的值
      • str.trim()：去除字符串左右两侧的空格
    • value.length：获取输入值的长度

注意：

• 事件类型要加引号
• 函数是点击之后再去执行，每次点击都会执行一次

键盘事件

<input type = "text">
<script>
	const input = document.querySelector('input');
    input.addEventLisener('keydown',function(k){//传入按下按下按键的对象
        console.log("键盘按下"+k.key);//打印按下的按键
      
    });
    input.addEventLisener('keyup',function(){
        console.log("键盘弹起");
    });
</script>

事件对象

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

使用场景：

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

获取事件对象

语法：

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

元素对象.addEventListener('click',function(e){//传入事件对象
    console.log(e);//输出事件对象
});

常用事件对象属性

• type：获取当前事件的事件类型
• clientX clientY：获取光标相对于浏览器可见窗口左上角的位置
• offsetX offsetY：获取光标相对于当前DOM元素左上角的位置
• key：用户按下的键盘的值；现在不提倡使用keyCode

环境对象

指的是函数内部特殊的变量this，代表当前函数运行时所处的环境；明白this的指向，可以让我们的代码更简洁

指向：this指向的时函数的调用者

回调函数

如果将函数A的返回值作为参数传递给函数B时，我们称函数A为回调函数

事件监听的版本

• DOM L0：事件源.on事件=function(){ }
• DOM L1：DOM级别1于1998年10月1日成为W3C推荐标准
• DOM L2：事件源.addEventLisener(事件，事件处理函数)
• DOM L3：DOM3级事件模块在DOM2级事件的基础上重新定义了这些事件，也添加了一些新事件类型

区别：L0方式会被覆盖，L2方式可以绑定多次，拥有事件更多特性，推荐使用