javascript - 我想用点击事件创建元素，但有问题

Question

我需要 javascript 方面的帮助。

这个想法是我想通过使用 createElement 方法创建新元素，并且我想向这个新元素添加 onclick 属性，并且我想如果单击此元素实现功能。

我输入的代码如下:

HTML

<a href="javascript:popupWin.crWindow()">open</a>

Javascript

var popupWin = {
                width: 640,
                height: 480,
                bg_colorBack: '#808080',
                content: "<div style='margin:0 auto; text-align:center; width:640px; heihgt:480px; background-color:rgba(255,255,255,1.0); color:#000;'> Hello Wrold! </div>",

                crWindow: function(){
                    var winElem = document.createElement('div');
                    winElem.id = 'flywin';
                    winElem.style.backgroundColor = this.bg_colorBack;
                    winElem.style.direction = 'rtl';
                    winElem.style.textAlign = 'center';
                    winElem.style.width = '100%';
                    winElem.style.height = '100%';
                    winElem.style.position = 'absolute';
                    winElem.style.top = '0';
                    winElem.style.left = '0';
                    winElem.style.opacity = '0.6';
                    winElem.style.filter = 'alpha(opacity=60)';
                    winElem.innerHTML = this.content;
                winElem.onclick = this.closeWindow();
                    document.body.appendChild(winElem);
                },

                closeWindow: function(){
                    alert('hello');
                }
            }

Answer 1

在我看来，问题在于您没有分配点击处理程序 - 您实际上是在调用它。

winElem.onclick = this.closeWindow();

看到那些 () 了吗？他们调用该函数，分配给 onclick 的是返回值。由于它没有返回任何内容，因此分配的值是未定义

这应该可以正常工作:

winElem.onclick = this.closeWindow;

现在它分配函数本身。

但是，这样的话，this 将不会引用 popupWin。如果您希望它正确引用，请将函数包装在闭包中，如下所示:

var self = this;
winElem.onclick = function() {
    self.closeWindow();
};