我想用click事件创建元素,但是有一个问题

时间:2011-05-02 23:04:53

标签: javascript events

我需要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');
                }
            }

1 个答案:

答案 0 :(得分:2)

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

winElem.onclick = this.closeWindow();

看那些()吗?他们调用函数,分配给onclick的是返回值。由于它不返回任何内容,因此分配的值为undefined

这应该有效:

winElem.onclick = this.closeWindow;

现在它分配了函数本身。

然而,就这样,this将不会引用popupWin。如果您希望它正确引用,请将函数包装在一个闭包中,如下所示:

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