每个元素身上的事件都是天生自带的,只需要我们给这个事件绑定一个方法(不需要去定义它),当事件触发时就会执行这个方法
1、时间绑定的两种写法
(1)div.onclick=function(){}
(2)div.addEventListener()或div.attachEvent()
(1)与(2)这两者的区别
onclick是这个元素的私有属性,天生自带的,而addEventListener()是公有属性,从EventTarget(事件源)对象上继承来的;IE低版本的attach是公有de。
div.onclick存在事件冒泡,不存在捕获;
div.addEventListener()有冒泡也有捕获
div.attachEvent()只有事件冒泡。
2、div.addEventListener()和div.attachEvent()的区别
(1)attachEvent()只用在IE8以下,addEventListener()适合标准浏览器
(2)attachEvent()的事件名带on,addEventListener()的事件名不带on
(3)attachEvent()函数里面的this是undefined,addEventListener()的函数里面的this是当前元素对象
(4)attachEvent()只有冒泡没有捕获,addEventListener()有冒泡也有捕获
3、arguments
每个函数都有一个arguments对象,它是这个函数所有的参数构成的集合;在某个事件绑定的方法中,console.log(arguments)数组中有一个元素叫MouseEvent,每个事件的方法中浏览器都给他一个参数叫做MouseEvent,鼠标中的所有信息都临时存在这个mouseEvent对象上
4、mouseEvent的兼容性
var e=e||window.event;
5、Event对象的兼容性
clientX和clientY是鼠标到网页左上角的距离坐标,但IE低版本没有这个属性,
IE如何计算pageY的值:clientY+scrollTop
6、获取事件源,点击哪个元素,哪个元素就是事件源
标准:e.target
非标准:e.srcElement
7、阻止事件冒泡的兼容性
标准和非标准都兼容:event.cancelBubble=true
标准:event.stopPropaggation()
兼容上面两种:event.stopPropaggation?event.stopPropaggation():event.cancelBubble=true
8、阻止事件默认行为的兼容性
例如:a
a.href="javascript:;"取消刷新
标准和非标准都兼容取消刷新:event.preventDefault?event.preventDefault():event.returnValue=false