Question

我是Javascript的新手。练习时我会遇到有关事件处理的代码。这是代码

//This generic event handler creates an object called eventHandler
var etHandler = {};

if (document.addEventListener) {

    //eventHandler object has two methods added to it, add()and remove(),
    etHandler.add = function(element, eventType, eventFunction) {

        /**
         * The add method in each model determines whether the event type is a load event, meaning that
         *  the function needs to be executed on page load.
         */
        if (eventType == "load") {

            .......

        }
    };// end of eventHandler.add = function()

    etHandler.remove = function(element, eventType, eventFunction) {

        element.detachEvent("on" + eventType, eventFunction);

    }; //end of  etHandler.remove = function()
}

function sendAlert() {

    alert("Hello");

} //end of sendAlert()

function startTimer() {

    var timerID = window.setTimeout(sendAlert,3000);

}//end of startTimer()

var mainBody = document.getElementById("mainBody");

etHandler.add(mainBody, "load", function() {

                                startTimer();

                            }
             );

我想问的问题是这个。我们创建一个空对象。var etHandler = {};。没关系。然后我们正在检查条件if (document.addEventListener) {}。我们没有向文档中添加任何事件侦听器，但这种情况属实。为什么这种情况会恢复正常？然后我们写etHandler.add = function(element, eventType, eventFunction) {}。我们为什么要写etHandler.add？当我们创建它时，etHandler对象没有属性。这是一个空对象。如果我们像这样创建etHandler

var etHandler = {

    add: function() {

    },

    remove: function(){

    }
};

然后我们可以写etHandler.add。同样的问题也适用于etHandler.remove。

由于

Answer 1

调用if (document.addEventListener)正在检查浏览器是否支持此方法。它正在检查它是否存在于文档对象上。这称为特征检测，经常用于检测浏览器之间的差异。

调用etHandler.add = function(element, eventType, eventFunction)定义add方法并同时创建它。它与您的示例基本相同。

关于Javascript中事件处理的混淆

1 个答案: