Question

这是一个简单的脚本，如果单击它，应该使文本更改颜色。但是，当我加载页面时，颜色会自动更改（绕过click事件），控制台会出现此错误＆＃34; Uncaught TypeError：undefined不是函数＆＃34;在线

allP.addEventListener("click", this.changeSomething(), false);

我的问题是： 1）如何使这个非常简单的脚本工作？ 2）关于编码的任何其他反馈更好地向前发展？我非常感谢任何教学点。

标记：

<P>Lorem</P>
<P>Lorem</P>

使用Javascript：

var colorChanger = {
    init : function() {
        this.clickEvent();
    },

    config : {
        myColor: "red"

    },

    clickEvent : function() {
        allP = document.querySelectorAll("p");
        allP.addEventListener("click", this.changeSomething(), false);

    },

    changeSomething: function(myColor) {
        myColor = this.config.myColor;

        $("p").css({
            color: myColor // I know changing CSS in JS is bad practice but this is just for the sake of the exercise

        })

    }
}

$(document).ready(function() {
colorChanger.init();
});

非常感谢任何反馈！

Answer 1

1）addEventListener期望一个函数作为第二个参数，但是你传递了函数返回的内容（即undefined）。

2）在this.changeSomething中，上下文（this）是window，因为这是调用事件的函数的上下文。

更改

allP.addEventListener("click", this.changeSomething(), false);

到

allP.addEventListener("click", this.changeSomething.bind(this), false);

修改

另外，这......

allP = document.querySelectorAll("p"); allP.addEventListener("click", this.changeSomething(), false);

..不起作用。您不能像这样访问nodeList中的项目。

尝试这样的事情：

allP = document.querySelectorAll("p"); for (var i=0; i<allP.length; i++) { allP.item(i).addEventListener("click", this.changeSomething.bind(this), false); }

点击功能在加载时运行;未定义函数的未捕获TypError

1 个答案: