事件

事件监听(注册事件)

语法:

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

//例如
let btn = document.querySelector("button")
btn.addEventListener("clilk", function(){
        alert('点击事件')
})

注意:

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

事件监听三要素:

谁被触发 / 用什么方式 / 要做什么

  • 事件源:哪个dom元素被事件触发了,要获取dom元素
  • 事件(字符串):用什么方式触发,比如鼠标单击click、鼠标经过mouseover等
  • 事件调用的函数:要做什么事

事件监听版本

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

DOM L2 事件源.addEventListener(事件, 事件处理函数)

发展史:
  • DOM L0:是 DOM 的发展的第一个版本; L:level
  • DOM L1:DOM级别1 于1998年10月1日成为W3C推荐标准
  • DOM L2:使用addEventListener注册事件
  • DOM L3:DOM3级事件模块在DOM2级事件的基础上重新定义了这些事件,也添加了一些新事件类型

事件类型

鼠标事件 焦点事件 键盘事件 文本事件
鼠标触发 表单获得光标 键盘触发 表单输入触发
click 鼠标点击 focus 获得焦点 Keydown键盘按下触发 input用户输入事件
focus 获得焦点 blur 失去焦点 Keyup键盘抬起触发
mouseenter 鼠标经过

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注