复习笔记之API(14)

立即执行函数

立即执行函数:不需要调用,立马能够自己执行的函数

• 作用:创建一个独立作用域,立即执行函数里面所有的变量都是局部变量

// 立即执行函数最常用的的两种写法
(function() {})();
(function() {}());

(function(x, y) {
    console.log(x + y);
})(1, 2);

(function() {
    console.log(x + y);
}(2, 3))

• DOMContentLoaded事件:等页面中主要的元素加载完毕再触发的事件
• resize事件:页面尺寸(窗口大小)发生变化触发的事件
• pageshow事件 :重新加载页面触发的事件
• load事件:重新加载页面触发的事件

下面三种情况都会刷新页面都会触发load事件

• a标签的超链接
• F5或刷新按钮(强制刷新)
• 前进后退按钮

• 火狐中有个特点,有个"往返缓存",这个缓存中不仅保存着页面数据,还保存了DOM和JavaScript的状态;实际上是将整个页面都保存在内存里,所以此时后退按钮不能刷新页面;此时可以使用pageshow事件来触发,这个事件在页面显示时触发,无论页面时候来自缓存,在重新加载页面中,pageshow会在load事件触发后触发;根据事件对象中的persisted来判断是否是缓存中的页面触发的pageshow事件,注意,这个事件给window添加

mouseenter事件和mouseover事件的区别

• mouseenter鼠标事件：当鼠标移动到元素上时就会触发mouseenter事件
• mouseover鼠标经过自身盒子会触发，经过子盒子还会触发；mouseenter只会经过自身盒子触发

<!-- 我就假装这里有CSS样式，想象一下就好了 -->
<div class="father">
    <div class="son"></div>
</div>
<script>
    let father = document.querySelector('.father'),
        son = document.querySelector('.son');
    // 给父盒子绑定鼠标滑过事件，经过父盒子会触发一次·，经过子盒子还会触发一次
    father.addEventListener('mouseover', function() {
        console.log(11);
    });

    // 只是经过父盒子会触发一次，经过子盒子不会触发
    let father = document.querySelector('.father'),
        son = document.querySelector('.son');
    father.addEventListener('mouseenter', function() {
        console.log(11);
    });
</script>

mouseenter不会冒泡，所以只会触发一次，跟mouseenter搭配的还有mouseleave,同样不会冒泡