事件处理（二）--文档事件、焦点事件（表单事件）、滚动事件、键盘事件

小白小白从不日白

已于 2022-05-17 22:27:30 修改

阅读量562

点赞数

分类专栏： javascript 文章标签： javascript

于 2021-04-16 10:56:39 首次发布

本文链接：https://blog.csdn.net/weixin_43285360/article/details/115735163

版权

javascript 专栏收录该内容

25 篇文章 2 订阅

订阅专栏

一、文档事件

简介：

文档事件中主要是指添加给整个文档的事件。在这一类事件中，绝大部分并不需要用户主动去进行调用。而是通过文档的不同状态来进行自动执行。

1.加载成功/失败事件

 <img src="images/1.jpg" alt="" style="width: 200px;" />

<script>
		 //图片加载失败时触发
        document.querySelector('img').onerror = function() {
            console.log('图片加载失败');
        }
        
        //图片加载成功时触发
		document.querySelector('img').onload = function() {
            console.log('图片加载成功');
        }
</script>

在这里插入图片描述

2.当DOM加载完成时触发事件：DOMContentLoaded

DOMContentLoaded事件和load事件的区别是触发的时机不一样，先触发DOMContentLoaded事件，后触发load事件

DOM文档加载的步骤为:

解析HTML结构
加载外部脚本和样式表文件
解析并执行脚本代码
DOM树构建完成。 //DOMContentLoaded执行
加载图片等外部文件
页面加载完毕。 //load执行

因此样式文件的加载会阻塞脚本的执行

所以如果你要把一个内部脚本script元素放在了一个link后面，如果页面没有完成解析则脚本不会触发，直到样式文件加载完成之后。(这种情况被称为文件阻塞)

3.页面(文档)发生卸载时触发的事件：beforeunload

<script>
        window.onbeforeunload = function() {
            return '确定要离开';
        };
</script>

在这里插入图片描述

4.文档加载状态判断事件：readystatechange

当document的readyState改变时触发该事件（仅第二阶段）
而readystatechange事件正是在这个状态发生改变时调用的事件
调用方式也可以用DOM0和DOM2来绑定

补充：readyState属性

返回当前文档的状态（载入中……）
语法：document.readyState

该属性返回以下值:

uninitialized - 还未开始载入
loading - 载入中
interactive - 已加载，文档与用户可以开始交互
complete - 载入完成

readyState的三个可能值：

loading：加载DOM中
interactive：加载外部资源
complete：加载完成

<img src="images/1.jpg" alt="" style="width: 200px;" />

<script>
        
        console.log(document.readyState); //loading
        
        document.addEventListener('readystatechange', function() {
            console.log('文档加载状态变化：' + document.readyState);
        });

        document.addEventListener('DOMContentLoaded', function() {
            console.log('文档DOM树构建完成');
        });

        //页面彻底加载完成时触发
        window.onload = function() {
            console.log('文档彻底加载完成');
        };

        document.querySelector('img').onload = function() {
            console.log('图片加载完成');
        }
</script>

在这里插入图片描述

5.文档大小发生改变时的回调事件：resize

<script>
    window.onresize = function() {
        console.log('width:' + document.documentElement.clientWidth);
        console.log('height:' +document.documentElement.clientHeight);
    }
</script>

但是美中不足的是，js为了追求变化的敏感度，将resize事件的响应事件设置为了0，也就是说每一次的文档大小改变都会立即调用本事件。这就造成了【一次变化】却发生了【不止一次】的resize事件调用。

为了解决这个问题我们可以采用如下的延迟方法来写：

<script>
    var flag = true;

    function fra() {
        console.log('width:' + document.documentElement.clientWidth);
        console.log('height:' + document.documentElement.clientHeight);
        console.log('----------------------------');
        flag = false;
        setTimeout(function() {
            flag = true;
        }, 500);
    }
    window.onresize = function() {
        fra();
    };
</script>

二、焦点事件（表单事件）

描述：焦点事件分为获取焦点(focus)和失去焦点(blur)事件，分别会在元素节点获得焦点和失去焦点时自动触发

语法：

获取焦点：节点.οnfοcus=function(){}
失去焦点：节点.οnblur=function(){}
内容改变：节点.οnchange=function(){}
实时获取：节点.oninput(){}
表单提交事件：节点.onsubmit(){}

注意：

a.可以使用DOM0绑定也可以使用DOM2绑定
b.不支持事件冒泡
onfocus获取焦点事件，当输入框获得焦点时触发
onblur失焦事件，当输入框失去焦点以后，触发该事件
onchange域改变事件，输入框的值发生改变时，触发该事件，主要用于下拉框级联改变。onchange也可以作用于普通的输入框，但是必须在输入框输入的额内容发生改变且失去焦点以后才能触发该事件，才能拿到修改后的数据
oninput事件可以实时获取到用户修改之后的数据，只要用户修改了数据就会调用执行，只有在IE9及其以上浏览器才可用；在IE9以下如果也想实现，那么可通过节点.onpropertychange事件来实现
onsubmit表单提交事件，当提交表单时会首先触发该事件，然后根据该事件绑定的函数中的布尔返回值来决定是否真正的提交该表单

密码：<input type="text" />

<style>
        .greenborder {
            border: 2px solid green;
        }
        
        .redborder {
            border: 2px solid red;
        }
</style>

 <script>
        var input = document.querySelector('input');
        input.onblur = function() {
            var pass = input.value;
            if (pass.length > 6) { //合法
                input.setAttribute('class', 'greenborder');
            } else {
                input.setAttribute('class', 'redborder');
            }
        }
</script>

结果如下：
在这里插入图片描述

焦点事件案例：

 	<p>
        <span>手机号:</span>
        <input type="text"  class="userName"/>
        <span  class="userNameSpan"></span>
    </p>
    <p>
        <span>密码:</span>
        <input type="text"  class="password"/>
        <span  class="passwordSpan"></span>
    </p>
    <button  disabled>提交</button>

 <style>
        .borderGreen{border:  2px solid green;}
        .colorGreen{color:green}
        .borderRed{border:  2px solid red;}
        .colorRed{color:red}
</style>

<script>
        // 得到元素
        var userNameInput = document.querySelector('.userName');
        var password = document.querySelector('.password');
        var userNameSpan = document.querySelector('.userNameSpan');
        var passwordSpan = document.querySelector('.passwordSpan');
        var but = document.querySelector('button');

        //综合验证
        function checkIfSuccess() {
            if (userNameSpan.innerHTML == '正确' && passwordSpan.innerHTML == '正确') {
                //删除disabled属性
                but.removeAttribute('disabled');
            } else {
                //添加disabled属性
                but.setAttribute('disabled', 'disabled');
            }
        }

        //手机号输入框验证
        userNameInput.onblur = function() {
            //将输入框里的值赋值给userName
            var userName = userNameInput.value;

            //进行判断
            if (userName.length == 11) {
                userNameInput.setAttribute('class', 'borderGreen');
                userNameSpan.innerHTML = '正确';
                userNameSpan.setAttribute('class', 'colorGreen');
            } else {
                userNameInput.setAttribute('class', 'borderRed');
                userNameSpan.innerHTML = '请输入正确的手机号';
                userNameSpan.setAttribute('class', 'colorRed');
            }
            checkIfSuccess();
        }

        //密码输入框验证
        password.onblur = function() {
            //将输入框里的值赋值给pass
            var pass = password.value;

            //进行判断
            if (pass.length > 6 && pass.length < 12) {
                password.setAttribute('class', 'borderGreen');
                passwordSpan.setAttribute('class', 'colorGreen');
                passwordSpan.innerHTML = '正确';
            } else {
                password.setAttribute('class', 'borderRed');
                passwordSpan.setAttribute('class', 'colorRed');
                passwordSpan.innerHTML = '密码长度时6~12位';
            }
            checkIfSuccess();
        }
</script>

当其中有一个条件不满足时：
在这里插入图片描述
当两个条件同时满足时：

三、滚动事件

滚动条滚动事件，当网页滚动条发生滚动时，触发该事件

描述:scroll事件会在【文档】或【元素】发生滚动操作时触发

1.文档滚动事件

说明：属性scrollTop\scrollLeft表示文档滚动的距离:(没有单位)
语法：IE：document.documentElement.scrollTop\Left
非IE：document.body.scrollTop\Left
兼容性：（可以使用document.body.scrollTop||document.documentElement.scrollTop来解决兼容性）

<button>点我去1000的距离处</button>

 <style>
        body {
            height: 2000px;
            background: linear-gradient(skyblue, pink);
        }
</style>

<script>
        //获得元素
        var btn = document.querySelector('button');

        btn.onclick = function() {
            document.body.scrollTop = 1000;
            document.documentElement.scrollTop = 1000;
        }

        //当文档滚动时事件自动发生
        window.onscroll = function() {

            //滚动事件调用一次，就输出一次滚动距离
            console.log(document.body.scrollTop || document.documentElement.scrollTop);
        }
</script>

最终效果图：
在这里插入图片描述

文档滚动事件案例：

<button>回到顶部</button>

 <style>
        body {
            height: 2000px;
            background: linear-gradient(skyblue, pink);
        }
        
        button {
            position: fixed;
            bottom: 30px;
            right: 10px;
        }
</style>

<script>
        var timer = null;

        var button = document.querySelector('button');

        button.onclick = function() {
            //每隔一秒，向上滚动100距离
            timer = setInterval(function() {
                var top = document.documentElement.scrollTop || document.body.scrollTop;
                top = top - 100;
                console.log(top);
                document.documentElement.scrollTop = top;
                document.body.scrollTop = top;
                if (top <= 0) {
                    clearInterval(timer);
                }
            }, 100)
        }
</script>

2.元素滚动事件

元素发生滚动时并不存在兼容性问题，但是需要有一个前提就是：必须存在滚动条
元素的滚动条属性可以通过overflow:scroll/overflow-x:scroll/overflow-y:scroll来实现
在元素发生滚动时，可以通过【元素.scrollTop/scrollLeft】获取到元素的位移距离

 	<div>
        <p>我来了！</p>
        <p>我来了！</p>
        <p>我来了！</p>
        <p>我来了！</p>
        <p>我来了！</p>
        <p>我来了！</p>
        <p>我来了！</p>
        <p>我来了！</p>
        <p>我来了！</p>
        <p>我来了！</p>
        <p>我来了！</p>
        <p>我来了！</p>
        <p>我来了！</p>
        <p>我来了！</p>
        <p>我来了！</p>
    </div>
<button>回到顶部</button>

 <style>
        div {
            width: 200px;
            height: 300px;
            border: 1px solid black;
            overflow-y: scroll;
        }
</style>

<script>
        // 获得元素
        var div = document.querySelector('div');
        var button = document.querySelector('button');

        div.onscroll = function() {
            console.log(div.scrollTop);
        };

        button.onclick = function() {
            div.scrollTop = 0;
        }
</script>

四、键盘事件

描述：键盘事件是指当用户在操作键盘的时候会自动被触发的事件

注意：

(1)默认采用事件冒泡机制
(2)键盘事件一般绑定在需要用户输入的元素上(例如input)
（3）键盘事件直接绑定在body之上也是允许的

类型：

keydown:用户按下任意键都可以触发这个事件。如果按住不放，事件会被连续触发
keyup: 键盘弹起事件，当键盘的任意一个按键按下并弹起后触发该事件
keypress：用户按下（可显示的）任意键都可以触发这个事件(功能键除外)；如果按住不放，事件会被连续触发 keypress能识别大小写）
event.keycode：在键盘事件中可以通过event.keycode来获取按下按键的编码值

 <input type="password" />

 <script>
        //获得元素
        var input = document.querySelector('input');

        document.body.onkeydown = function() {
            console.log('keydown:' + event.keyCode);
        }
        document.body.onkeypress = function() {
            console.log('keypress:' + event.keyCode);
        }
</script>

当按下非功能键时：
在这里插入图片描述
当按下功能键时：

keydown和keypress事件的区别：

keypress主要用来捕获：数字（包括shift+数字符号）、字母（包括大小写）、小键盘等能够显示在屏幕中的字符。但是不能对系统功能键（例如：后退、回车、删除等，其中对中文输入法不能有效响应）进行正常的响应
kepdown和keyup通常可以捕获键盘除了PrScrm所有按键（这里不讨论特殊键盘的特殊键）
keypress只能捕获单个字符；keydown和keyup可以捕获组合键
keypress可以捕获单个字符的大小写；keydown和keyup对于单个字符捕获的keycode都是一个值，也就是不能判断单个字符的大小写
keypress不区分小键盘和住主盘的数字字符；keydown和keyup区分小键盘和住主盘的数字字符
PrScm按键keydown、keyup、keypress都不能捕获；上下左右等功能键的keydown、keyup都能捕获keycode，并且值相等

一些常见的键盘按键编码：

常见的键盘按键编码

键盘事件案例：

 	<span>密码：</span>
    <input type="password" />
    <span class="showSpan">大写锁定已关闭</span>

<script>
        //得到元素
        var showSpan = document.querySelector('.showSpan');

        var flag = false; //flag为标识符，false表示当前是关闭状态

        document.body.onkeydown = function() {
            //如果按下capsLock,则判断打开还是关闭  。其他的不做任何的操作
            if (event.keyCode == 20) {
                if (flag == false) {
                    //改变flag状态，保证flag状态和capsLock状态一致
                    flag = true;
                    showSpan.innerHTML = '大写锁定已打开';
                } else {
                    flag = false;
                    showSpan.innerHTML = '大写锁定已关闭';
                }
            }
        }
</script>

在这里插入图片描述

小白小白从不日白

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
事件处理（二）--文档事件、焦点事件（表单事件）、滚动事件、键盘事件

一、文档事件简介：文档事件中主要是指添加给整个文档的事件。在这一类事件中，绝大部分并不需要用户主动去进行调用。而是通过文档的不同状态来进行自动执行。1.加载成功/失败事件 <img src="images/1.jpg" alt="" style="width: 200px;" /><script> //图片加载失败时触发 document.querySelector('img').onerror = function() {
复制链接

扫一扫