事件绑定分DOM零级事件和DOM二级事件绑定
DOM零级事件绑定
div.onclick=function(){}
DOM二级事件绑定
在元素对象原型链上的EventTarget这个类就是DOM二级事件绑定的类,在EventTarget.prototype上提供了addEventListener/removeEventListener(移除)
单从性能角度来说,我们的DOM0级事件绑定要优于DOM2级事件绑定,因为零级找的都是自己的私有的属性,而二级是通过原型一级级的查找才找到的
事件对象分鼠标事件对象和键盘事件对象
鼠标事件对象其实就是,存储一些关于“当前本次操作”,比如说鼠标的一些“相关的信息”(例如:鼠标操作点的坐标信息等等);而页面中只有一个鼠标所以当我进行第二次操作的时候,又重新获取了本次操作的鼠标相关信息,并且这些信息会把上一次存储的信息给覆盖掉
ie下的一些兼容问题
e.clientX/e.clientY:当前鼠标的触发点距离当前窗口(不是距离BODY)X轴/Y轴的坐标
div.onclick = function (e) {
e = e || window.event;
//->e.clientX/e.clientY:当前鼠标的触发点距离当前窗口(不是距离BODY)X轴/Y轴的坐标
//[兼容性]
//->e.target:事件源(鼠标是在哪个元素上触发的这个行为,那么当前的事件源就是谁) 在IE6~8中是不存在e.target的,只能使用e.srcElement
e.target = e.target || e.srcElement;
//->e.pageX/e.pageY:当前鼠标的触发点距离BODY的X轴/Y轴的坐标(在IE6~8中是不存在这两个属性的)
e.pageX = e.pageX || ((document.documentElement.scrollLeft || document.body.scrollLeft) + e.clientX);
e.pageY = e.pageY || ((document.documentElement.scrollTop || document.body.scrollTop) + e.clientY);
//->e.preventDefault:阻止默认行为(阻止浏览器天生的一些行为)
e.preventDefault ? e.preventDefault() : e.returnValue = false;
};
( 我一般用于点击任意处隐藏关闭)
事件的冒泡传播
触发当前元素的某一个行为,那么当前元素所有的父级元素,的相关行为,都会被依次触发(由内到外的)
阻止事件的冒泡传播
e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true;
真不明白我为什么每次都记不住,都要来复制粘贴 ……
事件传播的整套机制:
捕获阶段->冒泡阶段也有说是捕获阶段->目标阶段->冒泡阶段