js 事件模型
1.事件模型
(1)原始事件模型
直接给元素绑定事件,只处理当前元素的事件,无事件传递。
(2)IE事件模型
冒泡模型
(3)W3C事件模型
捕获模型+冒泡模型
a.捕获阶段
从document向上(到触发事件的元素方向)传递事件,遇到注册事件就执行。
b.目标阶段
到达触发事件的元素位置,执行事件处理函数。
c.冒泡阶段
从事件触发元素向document方向上传递事件,玉带注册事件就执行。
2.event对象
在W3C规范中,event对像随事件处理函数传入,Chrome FireFox Opera Safari IE9及IE+都支持。IE8及IE8-,event是window对象的一个属性。考虑到兼容性时,如下代码:
var event = event || window.event;
event对象属性:
(1)screenX/screenY(+W3C +IE)
距离显示器左/上位置。
(2)clientX/clientY(+W3C +IE)
距离可视区域左/上位置。
(3)pageX/pageY(-W3C -IE)
距离页面左/上位置。
(4)offsetX/offsetY(-W3C +IE)
距离具有定位属性的父元素的左/上位置。
(5)target(+W3C -IE),srcElement(-W3C +IE)
触发事件的目标元素。
(6)currentTarget(+W3C -IE)
当前处理事件的元素。
(7)preventDefault()(+W3C -IE)
阻止事件的默认行为。
(8)stopPropagation()(+W3C -IE) cancelBubble(-W3C +IE)
阻止事件捕获和冒泡。
<style type="text/css"> #container{ height: 1500px; background-color: #e8bcbc; position: relative; } #footer{ position: absolute; top:1000px; width:100%; height:300px; background-color: #94bb94; } </style> <script> window.onload = function(){ var container = document.getElementById('container'); var footer = document.getElementById('footer'); container.addEventListener('click',function(event){ var event = event || window.event; console.log('screenX:'+event.screenX+';screenY:'+event.screenY); console.log('clientX:'+event.clientX+';clientY:'+event.clientY); console.log('PageX:'+event.pageX+';PageY:'+event.pageY); console.log('offsetX:'+event.offsetX+';offsetY:'+event.offsetY); console.log('target:'+event.target); console.log('srcElement'+event.srcElement); console.log('currentTarget:'+event.currentTarget); },false); } </script>
3.事件绑定与解除
(1)原始事件
绑定:
elem.type = observer;
解除:
elem.type = null;
(2)IE
绑定:
elem.attachEvent('type',observer);
解除:
elem.detachEvent('type',observer);
(3)W3C
绑定:
elem.addEventListener('type',observer,isUseCapture);
解除:
elem.removeEventListener('type',observer,isUseCapture);