Question

我一直在研究一个具有基本功能的Javascript库。

我是Javascript的新手，并且正在使自己脱离jQuery，主要是为了自我改进。

我的目标是让一个与IE 8+兼容的javascript库，所以我正在寻找特定于浏览器的陷阱。

一个特定的问题是我的事件模块，当我尝试在Firefox 4中向一个选择器添加多个事件时，它似乎不起作用。

以下是相关模块：

该库的其余部分位于github：https://github.com/timw4mail/kis-js/blob/master/kis.js

 (function(){

    var attach, remove, add_remove, e;

    if(document.addEventListener)
    {
        attach = function(sel, event, callback)
        {
            if(sel.addEventListener)
            {
                sel.addEventListener(event, callback, false);
            }
        };

        remove = function(sel, event, callback)
        {
            if(sel.removeEventListener)
            {
                sel.removeEventListener(event, callback, false);
            }
        };  
    }
    else
    {
        attach = function(sel, event, callback)
        {
            if(sel.attachEvent)
            {
                sel.attachEvent("on"+event, callback);
            }
        };

        remove = function(sel, event, callback)
        {
            if(sel.detachEvent)
            {
                sel.detachEvent("on"+event, callback);
            }
        };
    }

    add_remove = function (sel, event, callback, add)
    {
        var i,len;

        if(!sel)
        {
            return false;
        }

        //Get the DOM object if you give me a selector string
        if(typeof sel === "string")
        {
            sel = $(sel);
        }

        //Multiple events? Run recursively!
        event = event.split(" ");

        if(event.length > 1)
        {
            console.log(event);

            len = event.length;

            for(i=0;i<len;i++)
            {
                add_remove(sel, event[i], callback, add);
            }

            return;
        }

        //Check for multiple DOM objects
        if(sel.length > 1)
        {
            len = sel.length;
            for(i=0;i<len;i++)
            {
                (add === true)
                    ? attach(sel[i], event, callback)
                    : remove(sel[i], event, callback);
            }
        }
        else
        {
            (add === true)
                ? attach(sel, event, callback)
                : remove(sel, event, callback);
        }
    };

    e = {
        add: function(sel, event, callback)
        {
            add_remove(sel, event, callback, true);
        },
        remove: function(sel, event, callback)
        {
            add_remove(sel, event, callback, false);
        }
    };

    window.$_.event = e;

 }());

Answer 1

好的，经过一段时间的搜索，我发现问题根本不在你的库中，而在于你的测试代码。问题是innerText在Firefox 4中不起作用。your test code的版本更新为使用innerHTML而不是innerText，效果非常好。

另外，您的库还有其他一些我认为应该指出的兼容性问题：

sel.addEventListener(event, callback, false);

和

sel.removeEventListener(event, callback, true);

应该有第三个参数的匹配参数。

引自MDC wiki：

如果一个监听器被注册了两次，一个有捕获，一个没有，每个都必须单独删除。删除捕获侦听器不会影响同一侦听器的非捕获版本，反之亦然。

此外，另一个兼容性问题（对于IE8或更低版本）：attachEvent期望您在事件名称之前“打开”，如下所示：element.attachEvent("onmouseover", function(){...});

Answer 2

window。$ .event返回错误，你的意思是widnow。$ = e，这样就可以使用了

 $_.add(document.getElementById('test'), 'click', function(){ alert(1); });

（添加和删除）在函数范围之外？

此外，您必须为IE8使用不同的事件（在attachHandler中），因为您不必点击，而是必须编写onclick，onfocus而不是焦点等。

如何提高此Javascript库的兼容性？

2 个答案: