关于本节视频中js代码的几点疑问，请老师帮忙解答

(function(doc, win) {
    var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function() {
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) return;
            if (clientWidth >= 640) {
                docEl.style.fontSize = '100px';
            } else {
                docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
            }
        };

    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
    recalc();
})(document, window);

1、在recalc里面，用docEl.clientWidth去动态调整html的字体大小，能不能用获取浏览器窗口宽度window.innerWidth来代替，这两者有什么不同
2、if (!doc.addEventListener) return;
这句是解决兼容性问题，因为在原生事件绑定中IE需要用到attachEvent，那遇到IE的时候该怎么做呢，下面的代码好像没有看到遇到IE的解决办法
3、doc.addEventListener('DOMContentLoaded', recalc, false);
这里为什么还要监听DOMContentLoaded事件呢，下一句代码不是已经运行了recalc()吗，DOMContentLoaded只是用来检测HTML页面是否完全加载完毕，就算没加载完毕下面也会运行recalc()
4、addEventListener()的第三个参数默认就是false，这里为什么还要再写一次，不写应该也是false吧

这几个问题理解不来，希望老师能详细讲解一下，谢谢了

人生的起源 2019-08-02

源自：项目：移动端课程列表页 3-1 header响应式布局（1）

收起

2回答

好帮手慕言回答被采纳获得+3积分 2019-08-03 10:11:02

同学你好，

1、如果都兼容的话，if (!doc.addEventListener) return;这句可以不用写。

2、if (!doc.addEventListener) return；这句代码，如果页面不支持事件监听，直接返回，后面的代码就不执行了，提高了性能。

3、如果遇到不兼容事件监听的浏览器，会直接返回。

4、单独的那句recalc();不可以不写，在页面初始化时要设置一下，因为css里面有使用rem，同学可以把下面的那句注释一下，滑动轮播时就会有问题。

如果还有疑问，建议新建一个问答重新提问，老师帮助解决。

如果帮助到了你，欢迎采纳~祝学习愉快~

收起回答

好帮手慕言 2019-08-02 18:42:17

同学你好，

1、不能。innerHeight/innerWidth 获取的是可视区的宽高，包括了滚动条的宽度，

clientHeight/clientWidth 获取的是可视区的宽高，不包括滚动条的宽度。

2、如果是IE的话，使用attachEvent，IE是支持attachEvent的。

3、下面的recalc执行的时候不能保证已经加载完毕，所以在页面加载完成以后再执行一次

4、默认为false，再写一遍false 也是没有问题的哦。

如果帮助到了你，欢迎采纳~祝学习愉快~

收起回答

提问者人生的起源 #1

如果手机端的浏览器都支持addEventListener()，是不是if (!doc.addEventListener) return;这句就不用写了？

2019-08-02 20:13:28
提问者人生的起源 #2

上面那段代码只写if (!doc.addEventListener) return;，下面却没写出不兼容浏览器的解决方案，这样做意义好像也不大？

2019-08-02 20:14:57
提问者人生的起源 #3

遇到不兼容的浏览器，等于没效果是不是？

2019-08-02 20:15:30