十二、JavaScript事件

一、事件的传播和阻止

事件的传播：点击后代标签时，会触发所有父级标签相同类型的事件

执行顺序：从当前标签向父级元素执行，也就是执行当前标签的事件，再逐一执行父级标签的事件

捕获顺序：当前标签触发事件，会寻找父级标签上相同的事件类型一起执行

冒泡机制：ie浏览器，从子级开始，向父级获取具有相同的事件类型

捕获机制：非ie浏览器，从父级开始，向子级获取具有相同的事件类型，执行时，顺序都是 从 当前标签 至 父级标签

阻止事件的传播

普通浏览器：

低版本ie浏览器：

谁写谁阻止，谁不触发父级，谁不写谁触发父级

二、事件委托

事件不是写给当前标签的，而是绑定给父级标签

通过父级标签触发事件，然后通过判断触发事件的对象，来判断需要执行的不同代码

绑定给父级标签对象的事件，触发时有可能是不同的标签对象，触发的事件

子级标签没有绑定事件，因为是父级标签的一部分，点击子级也算是点击父级，因为也会触发父级的事件

三、tab切换

原理：通过父级标签添加点击事件，以事件委托的方式给ul>li添加执行程序

缺点：

没有通过循环遍历，给所有ul>li添加事件，没有获取到索引下标

就必须要在 ul>li 标签中自定义属性和属性值，属性值就是标签对应的索引下标

四、事件对象的属性

e.target：触发事件的标签对象

e.target.parentelement：直接父级标签对象

e.target.parentnode：直接父级标签对象

e.target.tagname：触发事件的标签对象名称，全大写英文字母

点击事件中，e事件对象中存储坐标信息，只能获取鼠标点击的位置坐标，不能设定

键盘事件中，e事件对象中存储的按键信息

offsetx，offsety

触发事件的标签对象，左上角为坐标原点

在鼠标拖拽时，鼠标坐标原点会改变

在整个页面中拖拽div

起始时坐标原点是 document 文档的左上角

当鼠标经过div时，坐标原点是 div 的左上角

获取的坐标数值不同，会造成 div 闪来闪去

clientx，clienty

视窗窗口，左上角为坐标原点

pagex，pagey

html文档，左上角为坐标原点