Web APIs 第四天 事件高级

1.事件类型

​ 鼠标事件：鼠标经过：mouseenter/mouseover 区别：mouseover执行冒泡，mouseenter不执行冒泡

​ 鼠标离开：mouseleave/mouseout

​ 键盘事件：键盘按下：keydown

​ 键盘抬起：keyup

​ 键盘按下：keydown 任何键都可以触发

​ keypress 只有输入键可以触发，功能键(Ctrl、shift、Alt)不可以触发

2.事件对象

​ 事件触发时产生的对象 对象里有事件触发时的相关信息

​ 事件对象在回调函数的第一个形参里，形参可以随便写，建议写e、ev、event、e、ev

​ 常用属性：type：获取当前的事件类型

​ 形参.clientX，形参.clientY：相对于浏览器的位置

​ 形参.pageX、形参.pageY：相对于文档的位置

​ 形参.offsetX、形参.offsetY：相对于当前元素的位置

​ 形参.key 获取当前按下的是哪个键

​ 形参.keycode 获取键码值，用户按下的键盘的值

3.事件流

​ 事件触发时发生的流程

​ 事件流有两个阶段：捕获阶段(从document到HTML到body到元素的父级到元素)和冒泡阶段(子到父)

​ 事件冒泡：从子到父 假如给子元素监听了单击事件，则它的父盒子一直到document都有点击事件，只不过它的父盒子到document没有监听事件，所以没产生效果

​ 事件捕获：道理同事件冒泡一样

​ 添加监听事件有三个参数，一个是事件类型，一个是程序处理函数，一个是true/false 事件流默认是冒泡(参数为false)，如果想要事件捕获，就要用参数true 如果用L0的话，就只有冒泡，没有捕获

​ 阻止事件流动：时间对象.stopPropagation()

​ 阻止默认行为：时间对象.preventDefault() 比如a链接跳转，不让他跳转，表单的提交，拖入一个图片到浏览器，浏览器默认会打开这个图片，结果不让他打开这个图片

4.注册事件两种方式的区别

​ 第一种：事件源.on事件类型 = function () { }

​ 第二种：事件源.addEventListener('事件类型'，事件处理函数)

​ 如果第一种有多个同事件类型的，下面的会覆盖上面的；第二种就不会覆盖上面的

​ 清除事件，第一种直接事件源.onxxx = null；第二种把事件处理函数赋值给一个变量，然后事件源.removeEventListener('事件类型'，变量)

​ 第一种只执行冒泡，第二种冒泡和捕获都执行

5.事件委托

​ 用于多个相同元素用相同的事件类型时

​ 事件对象.target会找到最先触发的目标元素

​ 步骤：(1) 把子孙元素的事件注册给上级元素

​ （2）通过事件对象.target找到最先触发的目标元素

​ （3）通过tagName(nodeName)判断是否是你想要的元素

​ 优点：(1) 节省内存

​ (2) 动态创建元素

自动触发事件：元素.click();

事件对象中属性有个bubbles，为true就是冒泡，false就是不冒泡

事件对象.target：找到目标元素