简述事件捕获和事件冒泡的区别
object基类:
function array number Boolean string date math regexp
事件:
浏览器客户端上客户触发的行为都称为事件
所有的事件都是天生自带的,不需要我们去绑定,只需要我们去触发;
通过obj.事件名=function(){}
事件名:onmouseup;onmousedown;onclick。。。
当用户触发一个事件时,浏览器所有的详细信息都存在一个叫event的对象上;我们把它叫事件对象。
所有事件在绑定方法的时候,天生自带一个参数叫event
鼠标的坐标:
event.clientX event.clientY
event的兼容性:
在谷歌(Chrome)下event是undefined
在IE低版本(6-8)下event是null
在火狐下会报错
document.onclick=function(ev){
var ev=ev||window.event
}
事件冒泡:
当给父子元素的同一事件绑定方法的时候,触发子元素身上的事件,执行完毕之后,也会触发父级元素相同的事件,这种机制叫事件冒泡
取消事件冒泡:
event.stopProPagation?event.stoppropagation():event.cancelbubble=true;
事件捕获:
给父子元素用addeventlistener()绑定同一事件时,当触发子元素身上的事件时,先触发父元素,然后在传递给子元素,这种传播机制叫事件捕获;
给一个元素绑定事件,普通写法(dom0级)---
obj.onclick=function(){} 后者会覆盖掉前者
事件绑定第二种写法:(dom2级)---
标准:addeventlistener
非标准:attach
addeventlistener(参数1,参数2,参数3)
参数1:事件名, 参数2:事件函数 参数3:布尔值,(是否捕获,默认false,不捕获但是冒泡)
IE低版本没有捕获
普通事件写法没有捕获(会覆盖)
addeventlistener和attachevent二者区别:
addeventlistener attachevent
事件名不带on 事件名带on
this指向当前元素 this指向window
标准浏览器 IE低版本
有冒泡有捕获 只有冒泡
call和apply:
改变函数内this指向 xxx.call() xxx.apply()
call()中的第一个参数是null的时候,函数里面的this是指向原来的,不变
*所有事件都是异步的