js的构造函数

Question

        var btn=document.querySelector('button');
        function Mask() {
            this.mask=null
            this.createMask=function(){
                var html="";
                    html='<div class="mask"></div>';
                    document.body.innerHTML+=html;
                    // this.mask=document.querySelector('.mask');
            };
        }
        var obj=new Mask();
        btn.onclick=function(){
            console.log('a')
            obj.createMask();
            
        }

为什么只有第一次点击会执行函数。第二次点击连console.log()也不打印了。。麻烦知道的给回答下。。蟹蟹

Answer 1

来看看 innerHTML 的机理

Removes all of element's children, parses the content string and assigns the resulting nodes as children of the element.
via https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML

说明此 button 已经不是原来的 button 了，自然不会响应事件

Answer 2

你得改改：

var btn = document.querySelector('button');
function Mask() {
    this.mask = null
    this.createMask = function() {
        var mask = document.createElement('div');
        mask.className = 'mask';
        document.body.appendChild(mask);
    };
}
var obj = new Mask();
btn.onclick = function() {
    console.log('a')
    obj.createMask();
};

现在试试看

Answer 3

为了方便理解,我把代码写了一下

楼上说的都对,原理参考一楼,解决方案参考二楼.

var btn=document.querySelector('button');
    function Mask() {
        this.mask=null
        this.createMask=function(){
            var html="";
                html='<div class="mask"></div>';
                document.body.innerHTML+=html;
                   
                // 每一次改变innerHTML之后,都需要重新获取
                btn=document.querySelector('button');    
                btn.onclick=function(){
                    console.log('a')
                    obj.createMask();
                    
                }
        };
    }
    var obj=new Mask();
    btn.onclick=function(){
        console.log('a')
        obj.createMask();
        
    }

Answer 4

mask可以全局就用一个，没必要每次 innerHTML+= 或者 body.appendChild

Answer 5

试试把
btn = document.querySelector('button');放到点击事件函数里
btn.onclick=function(){
btn = document.querySelector('button');
console.log('a');
obj.createMask();
}

Answer 6

把onclick函数写进html元素里就可以了