1、冒泡:事件从最具体的元素向上触发
捕获:事件从最不具体的元素开始沿DOM树从上到下到事件的触发者结束。
事件的传播机制:若同时存在,先执行捕获,事件触发者,再执行冒泡。
2、DOM0级绑定事件:以冒泡处理,只有一个函数覆盖。
元素.onclick = function(){ }
元素.onclick = null;
3、DOM2级
元素.addEventListener (click,function(){ },true/false) //true:捕获;false:冒泡
元素.removeEventListener(click,函数名,flase) //移除时将函数提取出来,只写函数名
4、IE
attachEvent
detachEvent //移除时将函数提取出来,只写函数名
5、绑定事件不加()
调用事件加()
6、DOM中
方法-停止冒泡:元素.stopPropagation()
方法-停止默认:元素.preventDefault() //a标签
属性-type:获取事件的类型
属性-target:获取事件目标
IE中
方法-停止冒泡:cancelBubble
方法-停止默认:returnvalue = false //true:阻止
属性-type:获取事件的类型
属性-srcElement:获取事件目标
兼容获取事件目标:var ele = event.target || event.srcElement;
7、事件:
onclick:单击
ondblclick:双击
onmousedown:按下
onmouseup:释放
onmousemove:移动
onmouseenter:移入,不冒泡
onmouseleave:移出,不冒泡
onmouseover:移入,冒泡
onmouseout:移出,冒泡
8、window.onload :等页面加载完成
9、DomContentLoaded:dom加载完成后执行,必须放在2级事件才能执行
10、readystatechange:加载状态,改变时触发
11、window.onscroll:滚动时触发
scrollTop:获取到顶部的距离
12、onresize:改变浏览器窗口大小
13、onfocus:获取焦点后触发
onblur:失去焦点后触发
14、键盘事件:
keydown:任意键触发
keypress:功能键不触发
keyup:释放键盘触发
15、手机端:
touchstart:触摸屏幕时
touchmove:移动触摸时触发
touchend:用户不再触摸
16、clientX、clientY:相对于浏览器左上角的横纵坐标,与页面滚动无关
17、pageX、pageY:包含页面滚动的位移
18、screenX、screenY:相对于屏幕左上角的横纵坐标,与页面滚动无关
19、innerHeight、innerWidth:包括滚动条的距离
20、兼容写法:document.documentElement.clientWidth || document.body.clientWidth; 不包括滚动条的距离