如何從命名空間中的函數調用div的onmouseover事件？

Question

我有以下javascript代碼：

var FOO = FOO || {};

FOO.Main = (function() {

    function init() {
             // do some not relevant stuff
    }

    // User interaction
    function mouseOver() {
        console.log("OVER");
    }

    function mouseOut() {
        console.log("OUT");
    }

    init();
})();

而在html上：

<div id="logo-container" onmouseover="NARDOVE.mouseOver();" onmouseout="NARDOVE.Main.mouseOut();">
        <div id="layer-1">
            <canvas id="logo-canvas"></canvas>
            <script type="text/javascript" src="js/labs-logo.js"></script>
    </div>
</div>

但是我收到以下錯誤：

• 未被捕獲的TypeError：對象＃沒有方法'mouseOver'（index）：23
• 未捕獲的TypeError：無法調用未定義的方法'mouseOut'

我知道我以不同的方式調用方法，但這只是我的測試，有什么想法可以使用div內聯調用來調用鼠標方法嗎？

Answer 1

問題是定義命名空間的方式。 您將匿名函數調用的結果分配給FOO.Main，但匿名函數不返回任何內容。

您可以通過返回一個包含要通過FOO.Main公開公開的方法和屬性的對象來解決此問題：

var FOO = FOO || {};

FOO.Main = (function() {
    function init() {
             // do some not relevant stuff
    }

    // User interaction
    function mouseOver() {
        console.log("OVER");
    }

    function mouseOut() {
        console.log("OUT");
    }

    init();

    return {
        "mouseOver": mouseOver,            
        "mouseOut": mouseOut
    };
})();

然后，您可以像這樣調用mouseOver / mouseOut函數：

FOO.Main.mouseOver();
FOO.Main.mouseOut();