JavaScript-0815

1、BOM
1、理解：就是属于浏览器内置所提供的window对象。通过使用window对象控制到浏览器的功能
2、location对象：控制URL地址栏
1、获取到当前的URL地址 location.href
2、跳转 location.href = 值
3、刷新 location.realod()
3、history对象
history.go() 参数传递正数 表示前进 负数表示后退
4、定时器
反复执行某一个功能
1、设置定时器
setInterval(函数,时间毫秒) 返回定时器标识
2、清除定时器
clearInterval(定时器标识)
5、延时器
只执行一次
创建延时器：setTimeout(函数,时间毫秒)
清除延时器: clearTimeout(函数,时间毫秒)
6、浏览器端事件循环机制(EVENTLOOP)
JS本身自己是单线程，只能同时做一件事情，涉及到异步代码会将任务交到浏览器的任务队列(宏任务与微任务)中。当主线程代码执行完毕(同步代码)。按照优先级将任务队列中任务取出执行（反复进行）
2、DOM对象获取
浏览器除了提供一些功能服务之外(location等)，更加重要的是需要控制到页面上的元素。浏览器在解析html代码时根据每一个标签都设置了一个对象。只要将对象取出然后按照对应的使用方式就可以操作到页面上元素
document.querySelector(选择器规则) 结果就是dom对象
document.querySelectorAll(选择器规则) 返回结果是伪数组 数组中每一个元素才是dom对象
3、事件
1、事件的四要素
1、事件源(那一个标签)
2、事件名称(内置规定了的)
3、事件处理程序(函数)
4、事件对象(事件触发的环境信息)
2、事件绑定
1、行内绑定 在标签上设置on开头的属性值为js代码
2、动态绑定 dom对象.事件名称= 事件处理程序

常用事件

鼠标事件

<div></div>
<script>
    var divDom = document.querySelector('div');
    // ondbclick双击
    // oncontextmenu右键事件
    // 1、onclick 表示点击
    divDom.onclick = function(){
        console.log('div click')
    }
    divDom.onmousedown = function (){
        console.log('鼠标按下事件')
    }
    divDom.onmouseup = function(){
        console.log('鼠标抬起')
    }
    divDom.onmouseover = function(){
        console.log('鼠标划入事件')
    }
    divDom.onmouseout = function(){
        console.log('鼠标划出事件')
    }
    divDom.onmousemove = function(){
        console.log('鼠标的移动事件，只要鼠标在元素中移动就会反复触发')
    }

键盘事件

<input type="text" class="user">
    <script>
        var inputDom = document.querySelector('.user');

        inputDom.onkeydown = function(){
            console.log('键盘被按下')
        }

        inputDom.onkeyup = function(){
            console.log('键盘抬起')
        }

        inputDom.onkeypress = function(){
            console.log('press')
        }
        // 键盘按下触发事件顺序 onkeydown->onkeypress->onkeyup
        // onkeydown与onkeypress都是表示键盘按下事件 但是区别在于 onkeypress事件不会捕获功能性按键
    </script>

表单事件

焦点事件

1、获取与失去焦点

<input type="text" class="input">
<script>
    document.querySelector('.input').onfocus = function(){
        console.log('获取到焦点')
    }
    document.querySelector('.input').onblur = function(){
        console.log('失去焦点')
    }
</script>

2、使用示例

<input type="text" class="mobile" value="请输入手机号">
<script>
document.querySelector('.mobile').onfocus = function(){
            // 动态绑定中 事件处理程序中this表示当前事件源的dom对象
            if(this.value == '请输入手机号'){
                this.value = '';
            }   
        }
        document.querySelector('.mobile').onblur = function(){
            if(!this.value){
                // 没有输入内容
                this.value = '请输入手机号'
            }
        }
</script>

change事件

一旦针对select标签使用事件时 就使用onchange事件

<select >
        <option value="0">选中省</option>
        <option value="1" selected>湖北省</option>
        <option value="2">广东省</option>
    </select>
    <script>
        // 1、绑定select标签的 切换事件
        document.querySelector('select').onchange = function(){
            // 2、获取到select标签选中的值  每当选中一个option标签  将将option标签的value属性值设置到select标签上，如果选中的option标签没有value 就使用option中内容
            console.log(this.value);
            console.log('change')
        }
    </script>

input事件

<input type="text" class="mobile">
    <script>
        document.querySelector('.mobile').oninput = function(){
            console.log(this.value);
        }
    </script>

submit事件

<form action="" method="GET">
        <input type="text" class="mobile" name="mobile">
        <input type="submit" value="登录">
    </form>
    <script>
        document.querySelector('form').onsubmit = function(){
            // 表示当表单在提交之前做什么事情
            console.log('表单要准备提交了');
            // 阻止默认行为的一种方式 a标签与form标签天生就是要跳转地址。阻止默认行为就是阻止掉跳转
            // 使用return false 来阻止默认行为 一定要保证 执行不会出问题。一旦执行报错  return false就不执行 导致没有阻止掉默认行为
            return false;
        }
    </script>

浏览器事件

载入事件

1、问题演示

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-m1KyGVA9-1660555672863)(/1660551562075.png)]

2、问题原因

浏览器在解析代码时会按照顺序从上向下执行起来，当执行到js代码时此时 html标签中都还没有button按钮。所以导致在找button按钮的dom对象是得到的为null.。所以无法调用onclick属性 报错

3、解决方式

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-V2WnyqyN-1660555672864)(/1660551903344.png)]

4、浏览器相关的其他事件

// 页面关闭之前自动去执行
// window.onunload = function(){}
window.onresize = function(){
    console.log('页面尺寸改变时自动触发');
}

滚动事件

1、页面上特殊元素的获取

// 1、特殊元素的获取  页面上只有这么一个元素 不可能出现多个
console.log(document.body);//表示body标签
console.log(document.head);//表示head标签
console.log(document.title);
// 表示整个html
console.log(document.documentElement)

2、获取整个浏览器的宽高

 console.log(window.innerWidth); //获取整个浏览器的宽度 包含了滚动条
console.log(window.innerHeight);//获取整个浏览器的高度 包含滚动条17px

3、获取到页面的尺寸

 // documentElement 表示html标签 body 表示的是body标签
console.log(document.body.scrollWidth);//body标签可能存在其他的样式
console.log(document.documentElement.scrollWidth);//推荐使用这个方式

4、滚动事件

// 3、绑定滚动事件  不仅仅是页面的滚动条可以使用 其他元素出现滚动条 也是可以使用
    window.onscroll = function(){
        // 目前滚动了多少距离
        // console.log('123')
        // 滚动距离需要注意使用哪一个元素来获取  有DOCTYPE使用documentElement操作  没有就使用body(兼容性)
        console.log(document.documentElement.scrollTop);

    }

5、回到顶部

 // 修改滚动距离
document.querySelector('button').onclick = function(){
    document.documentElement.scrollTop = 0;
}

回到顶部案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p style="width: 10px; height: 2000px;">
        
    </p>
    <button>回到顶部</button>
</body>
</html>
<script>
    var timer;//保存定时器标识
    // 点击回到顶部按钮 慢慢的回到顶部上
    document.querySelector('button').onclick = function(){
        timer = setInterval(function(){
            // 获取到当前的滚动距离
            var height = document.documentElement.scrollTop;
            if(height<=0){
                // 到了顶部了 需要停止定时器的执行
                clearInterval(timer);
            }else{
                document.documentElement.scrollTop = height-20
            }
        },30)
    }
</script>