一篇文章彻底搞清楚js中的事件绑定

158 阅读1分钟

1.什么是事件?

事件是在编程时系统内发生的动作或者发生的事情,比如用户再网页上单击一个按钮

1.1什么是事件监听?
就是让程序检测是否有事件产生,一旦有事件触发,就立即调用一个函数做出响应,也称为注册事件。
·语法

image.png

1.2事件监听三要素
    ·事件源:哪个dom元素被事件触发了,要获取dom元素
    ·事件: 用什么方式触发,比如鼠标单击click,鼠标经过mouseover等
    ·事件调用的函数: 要做什么事

举例说明:

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

image.png

2.事件监听版本
·DOM L0
 事件源.on事件 = function(){}
`DOM L2
 事件源.addEventListener(事件,事件处理函数)
 发展史:
 `DOM L0:是DOM的第一个版本;L:level
 ·DOM L1DOM级别11998101日成为W3C推荐标准
 ·DOM L2: 使用addEventListener注册事件
 `DOM L3:DOM3级事件模块在DOM2级事件的基础上重新定义              了这些事件,也添加了一些新事件类型
 

3.事件类型

鼠标事件:鼠标触发
    mouseenter-鼠标经过
    mouseleave-鼠标离开
焦点事件:表单获得光标
    focus-获得焦点
    blur-失去焦点
键盘事件:键盘触发
    keydown-键盘按下触发
    keyup-键盘抬起触发
文本事件:表单输入触发
    input-用户输入事件
    change-输入框内容改变事件