javascript第十一天事件高级

事件高级  （所有内容 熟练使用）

1. 事件对象

(1)     定义：每一个事件都有一个事件对象 用来记录一些本事件相关的重要信息

(2)     获取事件对象：

①    元素.onclick = funciton(形参1){}  火狐的获取方式

1)       在事件处理函数的小括号中 写入的形参1 就可以接收到事件对象

②    在谷歌和ie中 直接通过window.event 获取到事件对象

(3)     事件对象的重要属性

①    CtrlKey、altKey、shiftKey：功能键，如果用户触发事件的时候，同时按住了某一功能键，对应的值就是true

1)       作用：制作热键

②    clientX/Y和pageX/Y ：获取鼠标相对位置 clientX/Y是获取元素相对于窗口左侧和顶部的距离   pageX/Y是获取元素相对于页面左侧和顶部的距离

1)       如果没有滚动条 就可以随意使用  如果有滚动条 推荐使用page系列

③    Target

1)       事件对象.target：当前实际触发事件的元素对象，不是添加事件的元素

④    Type

1)       事件类型

1. 事件绑定

(1)     addEventListener：添加事件监听器

①    用法：元素.addEventListener(“事件类型”,function(){},是否捕获(布尔值))

1)       是否捕获：是一个布尔值， true 表示执行捕获 false表示不执行捕获，可以省略，默认值为false，不执行捕获

2)       事件类型 不加on

②    On方式添加事件弊端：同一元素，不能添加多个同类事件，如果添加多个，就会导致后面的覆盖前面的

③    addEventListener可以给同一元素绑定多个同类事件

④    addEventListener也有兼容性问题 在ie低版本浏览器中不能使用

(2)     attachEvent：IE8-浏览器使用的绑定事件的方法

①    用法：元素.attachEvent(“事件类型”,funciton(){})

②    注意：事件类型必须加on

(3)     Window对象的onresize事件

①    页面大小改变事件  当页面大小发生变换的时候 就会触发该事件

1. DOM事件流

(1)     事件捕获阶段：当前事件会从window对象开始，向实际触发事件的元素进行传递，在传递的过程中，如果某一个元素具备当前事件，就会被一并触发

(2)     确定目标阶段：找到了实际触发事件的元素，并触发了该元素的事件

(3)     事件冒泡阶段：逆向的捕获阶段，从实际触发事件的元素 向 window 进行传递，这个过程中，如果某一元素具备当前事件 ， 就会一并触发

(4)     网页中事件 默认执行的是 事件冒泡阶段 如果想执行捕获阶段也可以通过设置addEventListener的第三个参数为true  来实现

(5)     在ie中并不存在捕获阶段，ie只有冒泡阶段

(6)     阻止冒泡：

①    标准浏览器中：事件对象.stopPropagation()

②    Ie低版本浏览器中：事件对象.cancelBubble = true

1. 解绑事件

(1)     标准浏览器

①    removeEventListener

1)       用法：元素.removeEventListener(事件类型，function(){}，是否捕获)

(2)     Ie低版本浏览器

①    detachEvent

1)       用法：元素.detachEvent(事件类型，function(){})

(3)     注意：在解绑事件的时候 必须给处理函数加函数名

(4)    

1. 取消事件的默认行为

(1)     点击事件在点击a标签的时候 会默认跳转页面， 右击事件会弹出菜单

①    标准浏览器：事件对象.preventDefault()

②    Ie低版本浏览器：事件对象.returnValue = false

③    二者互不兼容 需要设置兼容

1. 键盘事件

(1)     键盘按下事件  keydown  键盘按下触发

(2)     键盘抬起事件  keyup  键盘抬起触发

(3)     键盘按压事件  keypress  键盘按压触发

(4)     键盘类事件的事件对象的重要属性   

①    Key：键盘值 有兼容性问题

②    keyCode：键盘码 当前用户按下的键对应的Unicode编码值

1. Js滚轮事件-----作妖的火狐

(1)     Onmousewheel 标准浏览器和ie共用是滚轮事件

(2)     DOMMousescroll 火狐的滚轮事件

①    这种事件在火狐中还必须使用addEventListener来添加

(3)     获取滚轮滚动方向

①    在onmousewheel事件中 事件对象的 wheelDelta属性 得到的结果 就是滚轮的方向 小于0向下滚动  大于0向上滚动

②    在DOMMouseScroll事件中 事件对象的detail属性 得到的结果是滚轮的方向 小于零向上滚动 大于零向下滚动

1. 事件委托（代理）

(1)     作用：

①    当我们需要给多个同类元素绑定相同事件的时候 我们需要使用事件委托提升性能

②    当我们要求新追加进来的元素 也要有同类事件，也可以使用事件委托

(2)     思路

①    将事件添加给所有元素共同的父元素

②    在实际触发事件的时候，通过事件对象的 target属性 找到实际触发事件的元素

③    判断，如果target是我们要绑定事件的元素，就执行相应的处理代码