DOM事件
事件:是浏览器赋予dom元素的默认行为,不管是否绑定天生就有操作
DOM0级事件绑定 dom.onxxx = function(){…}
- 给当前元素的私有属性赋值,只能赋值(绑定)一次(后面会覆盖前面);
- 不能绑定不属于自身的事件(eg:onContentLoaded)
- 取消事件响应 dom.οnclick=null;
DOM二级事件绑定 addEventListener(‘xxx’,function(){})
- 事件池机制 (可以绑定多个);可以处理所有标准事件,例如DOMContentLoaded只有DOM2才可以处理
- addEventListener(‘事件名不加on’,处理函数,true-捕获 false-冒泡);
- removeEventListener(‘事件名不加on’,函数名,true-捕获 false-冒泡);
- 点击一次可以响应多次事件,按顺序执行
- 如果为同一个事件多次添加同一个监听函数,该函数只会执行一次,多余的添加将自动被去除
- 对dom0级事件 不会相互覆盖
IE6-8 使用 attachEvent(‘onxxx’,function(){})
- IE8只支持事件冒泡
- btn.attachEvent(‘onclick’,function(){}); //事件冒泡,只有两个参数 ,第一个参数为on+事件名
- btn.detachEvent(‘onclick’,函数名);//取消事件响应 只能取消命名函数
- 函数内部 this->window
- 点击一次可以响应多次事件,最后绑定的事件最先执行
事件对象Event
每个DOM元素对象都是 EventTarget类的实例
记录当前操作的相关信息eg:type , target,srcElement,clientX,pageX,stopPropagation() ,preventDefault()
currentTarget 可以用this 替代
坐标位置
- event.pageX event.pageY 鼠标的在页面上的位置 (以body左上角为准)
- event.clientX event.clientY 鼠标与可视区左上角的距离 (与滚动条滚动无关)
- event.screenX event.screenY 屏幕坐标位置 (以屏幕为准)
IE 与标准浏览器中事件对象的差别
- 没有 srcElement属性(事件源), pageX,pageY , stopPropagation() ,preventDefault()。
- 事件对象基于window.event获取,不是通过参数传递
- 事件源只能基于target属性获取,没有 srcElement属性(事件源)
- 阻止默认行为:returnValue:false; 阻止冒泡传播 cancelBubble:true;
跨浏览器兼容事件对象
function initEvent(ev){
if(!ev){
//IE6-8
ev = window.event;
ev.pageX = ev.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft);
ev.pageY = ev.clientY + (document.documentElement.scrollTop || document.body.scrollTop);
ev.srcElement = ev.target;
ev.preventDefault = function preventDefault(){
ev.returnValue = false;
};
ev.stopPropagation = function stopPropagation(){
ev.cancelBubble = true;
};
}
return ev;
}
//在事件触发时,不仅通知方法执行,还会传递给当前方法一个实参:事件对象(记录本次操作相关信息的一个对象)
body.onClick = function(ev){
ev = initEvent(ev);
}
事件传播机制
在事件传播期间,有三个阶段:捕获,目标和冒泡。 Capturing > Target > Bubbling
- 在「捕获」(capturing)阶段中,事件从window向下传播到目标元素。当事件达到「目标」(target)元素后,「冒泡」(bubbling)才开始。
- 默认情况下,事件处理程序在冒泡阶段执行(除非将useCapture设置为true)。 它从最深的嵌套元素向外延伸。
事件委托/事件代理
- 基于事件冒泡机制,把当期事件委托给外层容器,这样触发容器内任何一个元素的相关事件,都可以传播到外层容器上,触发外层容器的相关事件行为,此时基于事件源不同处理不同的事情
持续更新中~