事件作用
事件作用 : 实现交互功能的
事件三要素
事件源: 什么元素
事件类型: 什么时刻
事件处理函数: 做什么事情
事件工作原理
注册事件 : 本质是给对象添加方法, 函数在声明的时候不会立即执行的。(声明函数)
触发事件 : 点击元素的时候,浏览器会自动捕捉到交互。 主动帮我们调用这个事件的方法。(调用函数)
事件类型
鼠标事件
onclick: 鼠标单击
ondblclick: 鼠标双击
onmouseenter: 鼠标移入 (以前: onmouseover)
onmouseleave: 鼠标移出 (以前: onmouseout)
onmousemove: 鼠标移动
键盘事件
oninput: 键盘输入 应用场景: 实时获取用户的内容 实时显示用户输入的数字: 如微博发布 实时显示用户搜索提示内容: 如京东搜索框
onfocus: 键盘成为焦点
onblur: 键盘失去焦点
onkeydown: 键盘按下 应用场景: 监听enter键,执行搜索功能
onkeyup: 键盘松开
网页事件
注册事件的时候是window,操作事件的时候是document.documentElement
window.onmousemove: 网页鼠标移动
window.onscroll: 网页滚动 document.documentElement.scrollTop: 网页滚动距离
window.onresize:网页尺寸变化 document.documentElement.clientWidth: 网页滚动距离
注册事件
点语法: 注册一个同名事件
注册: 事件源.事件类型=事件处理函数
移除: 事件源.事件类型=null
addEventListener: 可以注册多个"同名"事件
注册: 事件源.addEventListener('事件类型',事件处理函数)
移除: 事件源.removeEventListener('事件类型',事件处理函数)
事件对象
事件对象: 存储与事件相关的数据.
储存: 用户触发事件的时候,浏览器会自动捕捉触发时的鼠标(坐标点)和键盘信息(按键),并把相关数据存储到一个对象
获取事件对象: 给事件处理函数添加形参 event | ev | e
事件对象常用属性和方法
-
阻止默认事件: e.preventDefault() 应用: 常用于a标签和form表单
-
获取鼠标的触发点: e.pageX | e.pageY 应用: 获取鼠标的触发点到左上角的距离,用于盒子跟随鼠标移动
-
e.key: 获取按键字符串 'Enter' 常用于enter键: 'Enter'
-
e.keyCode: 获取按键ASCII码(每一个按键对应一个数字) 常用于enter键: 13
-
e.target: 获取真正点击的子元素(事件触发源)
-
e.stopPropagation(): 阻止事件的流动
事件冒泡
事件冒泡 : 触发子元素事件,所有的父级元素‘同名事件’会被依次触发
事件委托
事件委托 : 给父元素注册事件,委托子元素处理
事件委托原理: 事件冒泡
事件委托应用:
(1) 给动态新增的子元素注册事件
(2)性能优化 : 如果所有的子元素都需要注册"同名"事件,只需要给父元素注册
事件委托注意点: this指父元素 e.target: 真正触发的子元素 注册事件的父元素也不能是动态新增的
事件捕获
事件捕获: 与事件冒泡完全相反。触发子元素的事件时,会先从最顶级父元素window一级一级往下触发。
事件流三个阶段
事件流三个阶段: 获取事件阶段: e.eventPhase
(1)捕获阶段 (2)目标阶段 (3)冒泡阶段
阻止事件流动
阻止事件流动: 无论是冒泡还是捕捉都可以阻止(停止事件流)
e.stopPropagation()