JS复习-WebApi（4）

思维导图在第一章，有需要的小伙伴可以去看下。有任何疑问也可以随时练习我。

dom注册事件特点

点语法注册

​ 事件源 . 事件类型 = 事件处理函数（不能注册同名事件，后面的会覆盖前面的）

addEventListener

​ 事件源.addEventListener(‘事件类型’,事件处理函数)

​ * 特点：可以注册多个‘同名事件’，依次触发

点语法移除事件， 赋值null

box.onclick = null

移除事件 : 参数与addEventListener一致

​ /* 注意点： 只能移除具名函数， 无法移除匿名函数 */

​ box.addEventListener('click', fn )

​ fn : 取出函数堆地址 （函数也是一种数据类型，也可以像变量一样赋值）

​ fn() : 调用函数，作用是执行函数体，并得到返回值

阻止默认事件（ e.preventDefault()）

1. html中有部分标签自带点击事件 ： form表单,a标签
2. 如果给这些标签注册点击事件，会默认跳转
3. 阻止默认事件 ： 执行自己注册的事件

​

事件对象

事件对象 ：是存储事件相关数据的对象

​ * 用户触发事件的时候，浏览器会自动捕捉触发时候的（鼠标与键盘）数据，存入一个对象中，这个对象就叫做事件对象

事件对象获取 ： 事件处理函数添加形参

事件对象常用属性 :

​ e.pageX / e.pageY : 获取鼠标触发点到页面左上角距离

键盘事件

onfocus	成为键盘焦点
onblur	失去键盘焦点
oninput	键盘输入
/* 实时获取输入内容
onkeydown	键盘按下
/*监听enter键
onkeyup	键盘松开

获取按键

​ 1. e.key : 获取字符串 ‘Enter’

​ 2. e.keyCode : 获取键盘码ASCII码 13

3. / * 键盘上每一个按键对应一个数字，称之为ASCII码 */

事件冒泡

1. 事件冒泡 : 当触发子元素的事件时候，所有的父级元素‘同名事件’会被依次触发

​ 子元素->父元素->body->html->document->window

2. 应用场景： 时间委托技术

事件捕获

1. 事件捕获：当触发子元素的交互。先从外层父元素一级一级往里触发。

   ​ 子元素->父元素->body->html->document->window

2. 事件流的三个阶段： e.eventPhase

   1. 事件捕获
   2. 事件目标
   3. 事件冒泡

事件委托

事件委托 : 给父元素注册事件, 委托给子元素处理

事件委托原理 : 事件冒泡

事件委托注意点 :

​ 不能使用 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)