事件对象

 

事件：浏览器客户端上客户触发的行为都称为事件

事件对象：当客户触发一个事件时，浏览器的所有详细信息都存在一个叫event的对象上，我们把它叫事件对象

鼠标到浏览器窗口左上角的距离坐标：clientX     clientY

鼠标到网页左上角的距离坐标：pageX    pageY      但是ie低版本没有这个属性    如 pageY  在ie下用clientY+scrollTop

event的兼容性：

　　document.onclick=function(e){

　　　　var e=e||window.event 

　　}

事件冒泡：当给父子元素的同一事件绑定方法时，触发子元素身上的事件，执行完毕后，也会触发父元素的相同事件，这种传播机制叫事件冒泡

取消事件冒泡：  event.cancelBubble=true

事件捕获：当父子元素用addEventListener()绑定同一个事件时，当触发子元素身上的事件，会先触发父级元素，然后在传递给子元素，这种传播机制叫事件捕获

　　标准浏览器用addEventListener()      ie低版本用attachEvent()

　二者区别：

　　1、addEventListener适合标准浏览器   attachEvent只用在ie8以下

　　2、addEventListener事件名不带on    attachEvent的事件名要加on

　　3、addEventListener函数里面的this指当前当前元素对象    attachEvent函数里面的this指window

　　4、addEventListener有冒泡也有捕获  attachEvent只有冒泡没有捕获

事件绑定的写法：

　　1、div.onclick=function(){}

　　2、div.addEventListener()或div.attachEvent()

区别：

　　onclick是这个元素私有的属性，天生自带的，而addEventListener()是公有的属性，从EventTarget(事件源)对象上继承来的。

 

　　Ie低版本的attachEvent是公有的。

 

　　div.onclick 存在事件冒泡机制没有捕获机制

 

　　div.addEventListener() 可有冒泡可有捕获

 

　　div.attachEvent()只有冒泡机制

 

 

 

参数对象：arguments        所有鼠标信息都临时存储在这个mouseevent对象上

mouseevent有兼容性  标准浏览器可以直接读取，但是ie不行

兼容性：div.onclick=function(ev){

　　var ev=ev||window.event

}

事件源 ：点击哪个元素，哪个元素就是事件源

　　标准浏览器的事件源是ev.target

　　Ie6-8没有这个属性 但是ie有ev.srcElement

阻止事件冒泡兼容性

　　1.event.cancelBubble=true

　　2.event.stopPropagation?event.stopPropagation():event.cancelBubble=true

阻止事件默认行为兼容性　

　　Event.preventDefault?Event.preventDefault():event.returnValue=false

事件委托： 如果子元素身上绑定大量相同的事件，我们尽量采用事件委托，所有子元素把自己的事件委托给父级

　　原理：采用事件冒泡机制完成

　　为什么使用事件委托？

　　　　传统的for循环事件会增加大量的Dom操作（事件）影响页面性能，采用事件委托就是把所有的事件基于一个元素上。

事件委托和传统的事件绑定的优势

　　传统的事件绑定对新增元素不起作用，事件委托起作用

　　传统的事件绑定，有多少元素js就需绑定多少事件，事件委托只需要一个事件

 

键盘事件

　　onkeydown   onkeyup

键盘事件触发时，浏览器天生给方法一个叫KeyboardEvent的对象，所有键盘的信息都在这个对象上。

　　keyCode  键盘编码

补:

　　oncontextmenu   鼠标右击事件