思维导图在第一章,有需要的小伙伴可以去看下。有任何疑问也可以随时练习我。
dom注册事件特点
点语法注册
事件源 . 事件类型 = 事件处理函数(不能注册同名事件,后面的会覆盖前面的)
addEventListener
事件源.addEventListener(‘事件类型’,事件处理函数)
* 特点:可以注册多个‘同名事件’,依次触发
点语法移除事件, 赋值null
box.onclick = null
移除事件 : 参数与addEventListener一致
/* 注意点: 只能移除具名函数, 无法移除匿名函数 */
box.addEventListener('click', fn )
fn : 取出函数堆地址 (函数也是一种数据类型,也可以像变量一样赋值)
fn() : 调用函数,作用是执行函数体,并得到返回值
阻止默认事件( e.preventDefault())
- html中有部分标签自带点击事件 : form表单,a标签
- 如果给这些标签注册点击事件,会默认跳转
- 阻止默认事件 : 执行自己注册的事件
事件对象
事件对象 :是存储事件相关数据的对象
* 用户触发事件的时候,浏览器会自动捕捉触发时候的(鼠标与键盘)数据,存入一个对象中,这个对象就叫做事件对象
事件对象获取 : 事件处理函数添加形参
事件对象常用属性 :
e.pageX / e.pageY : 获取鼠标触发点到页面左上角距离
键盘事件
onfocus | 成为键盘焦点 |
---|---|
onblur | 失去键盘焦点 |
oninput | 键盘输入 |
/* 实时获取输入内容 | |
onkeydown | 键盘按下 |
/*监听enter键 | |
onkeyup | 键盘松开 |
获取按键
1. e.key : 获取字符串 ‘Enter’
2. e.keyCode : 获取键盘码ASCII码 13
- / * 键盘上每一个按键对应一个数字,称之为ASCII码 */
事件冒泡
- 事件冒泡 : 当触发子元素的事件时候,所有的父级元素‘同名事件’会被依次触发
子元素->父元素->body->html->document->window
- 应用场景: 时间委托技术
事件捕获
-
事件捕获:当触发子元素的交互。先从外层父元素一级一级往里触发。
子元素->父元素->body->html->document->window
-
事件流的三个阶段: e.eventPhase
- 事件捕获
- 事件目标
- 事件冒泡
事件委托
事件委托 : 给父元素注册事件, 委托给子元素处理
事件委托原理 : 事件冒泡
事件委托注意点 :
不能使用 this : this指向父元素
需要使用 e.target : 真正点击的子元素(事件触发源)
事件委托的应用 : 给动态新增元素注册事件
document.querySelector('ul').onclick = function(e){
/*
this : ul
e.target : 真正点击的子元素
*/
console.log( e.target )
元素.classList.contains(类名):元素的父亲的类名是否和括号里的相同,可以用来判断
阻止事件流动(e.stopPropagation())
作用:使用后可以对冒泡事件跳过该元素
document.querySelector('.father').addEventListener('click',function(e){
alert('我是红色父元素'+ e.eventPhase )
e.stopPropagation()
},false)