事件绑定与传播机制-优快云博客

事件绑定分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;

真不明白我为什么每次都记不住，都要来复制粘贴 ……

事件传播的整套机制:

捕获阶段->冒泡阶段也有说是捕获阶段->目标阶段->冒泡阶段