取消冒泡和取消默认操作兼容浏览器的问题?

Question

本帖最后由 u013346337 于 2014-01-02 16:43:44 编辑

Answer 1

本帖最后由 showbo 于 2014-01-02 16:57:52 编辑

  

Answer 2

1#还是没说到点。。var e = event || addEvent.fixEvent(window.event);window.event相当于一个事件对象的实例，fixEvent动态给实例增加了方法，当通过实例调用新增的方法时，方法中this对象就是这个实例下面这个应该好理解些    function o() { }    var _o = new o();
    _o.fun = function () { this.abc = 123; }
    _o.fun()
    alert(_o.abc)//123    _o = new o();
    alert(_o.abc)//undefined

Answer 3

因为代码太多了,我有些迷糊,查资料想了好几天,现在我具体一点://跨浏览器添加事件绑定
function addEvent(obj, type, fn) {
    if (typeof obj.addEventListener != 'undefined') {
        obj.addEventListener(type, fn, false);
    } else {
        if (!obj.events) obj.events = {};
        if (!obj.events[type]) {   
            obj.events[type] = [];
            //把第一次的事件处理函数先储存到第一个位置上
            if (obj['on' + type]) obj.events[type][0] = fn;
        } else {
            //同一个注册函数进行屏蔽，不添加到计数器中
            if (addEvent.equal(obj.events[type], fn)) return false;
        }
        //从第二次开始我们用事件计数器来存储
        obj.events[type][addEvent.ID++] = fn;
        //执行事件处理函数
        obj['on' + type] = addEvent.exec;
    }
}
//为每个事件分配一个计数器
addEvent.ID = 1;
 
//执行事件处理函数
addEvent.exec = function (event) {
    var e = event || addEvent.fixEvent(window.event);
    var es = this.events[e.type];
    for (var i in es) {
        es[i].call(this, e);//第一处this 是指obj
    }
};
//同一个注册函数进行屏蔽
addEvent.equal = function (es, fn) {
    for (var i in es) {
        if (es[i] == fn) return true;
    }
    return false;
}
//把IE常用的Event对象配对到W3C中去
addEvent.fixEvent = function (event) {
 alert(this+'|');  //第二处this  是指window
    event.preventDefault = addEvent.fixEvent.preventDefault;
    event.stopPropagation = addEvent.fixEvent.stopPropagation;
    return event;
};
 
//IE阻止默认行为
addEvent.fixEvent.preventDefault = function () {
    this.returnValue = false;   
    alert(this);//第三处this 是指event对象
};
 
//IE取消冒泡
addEvent.fixEvent.stopPropagation = function () {
    this.cancelBubble = true;
    alert(this);//第四处this 是指event对象
};第一处this是指obj对像  :因为把函数赋值给对象的onclick事件,所以这里的this是指obj对象
第二处this是指??:addEvent.fixEvent里,addEvent相当于普通方法,普通方法里添加方法,这里this相当于window?
第三处和第四处this是指event对象,因为此时相当于普通函数addEvent.fixEvent.preven赋值给event对象下的preventDefault方法,即event动态的增加了preventDefault方法,preventDefault方法里的this指event请问对吗?

Answer 4

第二个this错。。不是window，是addEvent这个对象，因为调用的是addEvent这个对象的方法

Answer 5

第18行代码:obj['on' + type] = addEvent.exec;
其中addEvent.exec方法赋值给对象的onclick事件,那么addEvent.exec函数里的this是指onclick对应的对象;
而第40行的:addEvent.fixEvent = function (event) {......}
虽然addEvent.fixEvent方法在addEvent.exec函数内部,但是从第26行:var e = event || addEvent.fixEvent(window.event); 这句代码可以看出addEvent.fixEvent函数里的this和addEvent.fixEvent方法里的this没有任何关系了,相互独立了...请问我这样理解对吗?......
有时候真的分不清楚什么时候函数是当做普通函数,什么时候又突然变成了对象了......

Answer 6

第18行代码:obj['on' + type] = addEvent.exec;
其中addEvent.exec方法赋值给对象的onclick事件,那么addEvent.exec函数里的this是指onclick对应的对象;
而第40行的:addEvent.fixEvent = function (event) {......}
虽然addEvent.fixEvent方法在addEvent.exec函数内部,但是从第26行:var e = event || addEvent.fixEvent(window.event); 这句代码可以看出addEvent.fixEvent函数里的this和addEvent.fixEvent方法里的this没有任何关系了,相互独立了...请问我这样理解对吗?......
有时候真的分不清楚什么时候函数是当做普通函数,什么时候又突然变成了对象了......this主要是看是从哪里调用的就指向哪个对象（注意call和apply方法可以修改this的指向），addEvent是函数，函数也是对象