javascript - js的构造函数

问题描述

问 题

        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()也不打印了。。麻烦知道的给回答下。。蟹蟹

解决方案

来看看 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 了，自然不会响应事件

这篇关于javascript - js的构造函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！