将addEventListener改成attachEvent，在IE8/IE6里面不能执行？

Question

为了实现输入表单提示文字特效，写了下面代码，为兼容IE8，添加了document.all检测浏览器，可是将addEventListener改成attachEvent，在IE8/IE6里面不能执行？

<input type='text' value='用户名' />
    <input type='text' value='用户名' />
    <script type="text/javascript">
        function values(){
            var get_input = document.getElementsByTagName("input");
            for (var i=0;i<get_input.length;i++)
            {    
                if(document.addEventListener)
                {
                    get_input[i].addEventListener('focus',function(){if(this.value==this.defaultValue){this.value='';}});
                    get_input[i].addEventListener('blur',function(){if(this.value==''){this.value=this.defaultValue;}});
                }
                else
                {    
                    get_input[i].attachEvent('onfocus',function(){if(this.value==this.defaultValue){this.value='';}});
                    get_input[i].attachEvent('onblur',function(){if(this.value==''){this.value=this.defaultValue;}});
                }
            }
        };
        values();
    </script>

Answer 1

似乎 attachEvent 的事件要加 on 的，你试一下get_input[i].attachEvent('onfocus',fn);

Answer 2

你把后面的东西都去掉，你会发现ie8其实支持的是addEventListener(不过有可能因为是调试器，所有支持的)

Answer 3

attachEvent中this指向window，网上找了个解决方法，自己看下吧~

    function addEvent(element, type, handler) {
        //为每一个事件处理函数分派一个唯一的ID
        if (!handler.$$guid) handler.$$guid = addEvent.guid++;
        //为元素的事件类型创建一个哈希表
        if (!element.events) element.events = {};
        //为每一个"元素/事件"对创建一个事件处理程序的哈希表
        var handlers = element.events[type];
        if (!handlers) {
            handlers = element.events[type] = {};
            //存储存在的事件处理函数(如果有)
            if (element["on" + type]) {
                handlers[0] = element["on" + type];
            }
        }
        //将事件处理函数存入哈希表
        handlers[handler.$$guid] = handler;
        //指派一个全局的事件处理函数来做所有的工作
        element["on" + type] = handleEvent;
    };
    //用来创建唯一的ID的计数器
    addEvent.guid = 1;

    function removeEvent(element, type, handler) {
        //从哈希表中删除事件处理函数
        if (element.events && element.events[type]) {
            delete element.events[type][handler.$$guid];
        }
    };

    function handleEvent(event) {
        var returnValue = true;
        //抓获事件对象(IE使用全局事件对象)
        event = event || fixEvent(window.event);
        //取得事件处理函数的哈希表的引用
        var handlers = this.events[event.type];
        //执行每一个处理函数
        for (var i in handlers) {
            this.$$handleEvent = handlers[i];
            if (this.$$handleEvent(event) === false) {
                returnValue = false;
            }
        }
        return returnValue;
    };
    //为IE的事件对象添加一些“缺失的”函数
    function fixEvent(event) {
        //添加标准的W3C方法
        event.preventDefault = fixEvent.preventDefault;
        event.stopPropagation = fixEvent.stopPropagation;
        return event;
    };
    fixEvent.preventDefault = function() {
        this.returnValue = false;
    };
    fixEvent.stopPropagation = function() {
        this.cancelBubble = true;
    };

    function values() {
        var get_input = document.getElementsByTagName("input");
        for (var i = 0; i < get_input.length; i++) {

            addEvent(get_input[i], 'focus', function() {
                if (this.value == this.defaultValue) {
                    this.value = '';
                }
            });
            addEvent(get_input[i], 'blur', function() {
                if (this.value == '') {
                    this.value = this.defaultValue;
                }
            });
        }
    };
    values();

用jq不好么- -
来源