Question

查看Secrets of the JavaScript Ninja中的事件处理程序，以下代码为DOM或IE模型设置事件：

if(document.addEventListener) {
    console.log("document.addEventListener");
    this.addEvent = function(elem, type, fn) {              
        elem.addEventListener(type, fn, false);
        return fn;
    };

    this.removeEvent = function(elem, type, fn) {
        elem.removeEventListener(type, fn, false);
    };
}

// [IE code elided]

然后，本书展示了如何添加和删除事件的示例：

var elems = document.getElementsByTagName("div");

for (var i = 0; i < elems.length; i++) (function(elem) {
    var handler = addEvent(elem, "click", function() { 
        this.style.backgroundColor = 
            this.style.backgroundColor == "" ? "green" : "";                    
        removeEvent(elem, "click", handler);
    });
})(elems[i]);

点击Good Morning <div>（background-color: red}时，为什么add green background-color事件仍会触发？

http://jsfiddle.net/c9Mq3/

Answer 1

重新发布评论作为最终未来参考的答案：

背景变为绿色，即使它已经定义了背景颜色，因为它是在CSS类中设置的，而this.style仅指内联样式。

通过内联样式设置它会产生the result you expect。

Answer 2

这段代码：

for (var i = 0; i < elems.length; i++) (function(elem) {
    var handler = addEvent(elem, "click", function() { 
        this.style.backgroundColor = 
            this.style.backgroundColor == "" ? "green" : "";                    
        removeEvent(elem, "click", handler);
    });
})(elems[i]);

遍历所有元素，并添加“click”事件侦听器。

事件仍会触发（并且颜色发生变化），因为在更改背景颜色的代码之后删除了侦听器。

这是单击元素时运行的代码：

this.style.backgroundColor = this.style.backgroundColor == "" ? "green" : "";                    
removeEvent(elem, "click", handler);

首先设置颜色，然后删除事件监听器。

在背景颜色未设置上添加Click事件

2 个答案: