JavaScript学习第十六天

键盘事件

onkeydown 键盘按下事件，当有按键按下时触发
onkeyup 键盘松开事件，当有按键被松开时触发
onkeypress 当有按键被按下并松开时会触发（当按下上下左右、shift、ctrl等功能键时，不会触发）
注意
由于电脑自带的连续触发的功能，当按键一直按着时onkeydown和onkeypress被会连续触发

html代码
<div class="wrap">
        <div class="box">
            onkeydown事件
            <input type="text">
        </div>
        <div class="box">
            onkeyup事件
            <input type="text">
        </div>
        <div class="box">
            onkeypress事件
            <input type="text">
        </div>
        <div class="box">
            <input type="text">
        </div>
    </div>

js代码
var ipt = document.getElementsByClassName('box');
    ipt[0].onkeydown = function (e){
    console.log(e.code);
    console.log('onkeydown事件');
    console.log('------------------------------------');

    }
    ipt[1].onkeyup = function (e){
    console.log(e.code);
    console.log('onkeyup事件');
    console.log('------------------------------------');

    }

    ipt[2].onkeypress = function (e){
    console.log(e.code);
    console.log('onkeypress事件');
    console.log('------------------------------------');
    }

知识点补充

在表单中，button元素也有type类型，默认是submit（提交），它有提交的效果
在form中，在里面的输入框中按回车键，有提交的效果

表单事件

oninput 在输入时触发
onfocus 元素获取到焦点时触发
onblur 元素失去焦点时触发
onsubmit 表单提交时触发，给form表单整体添加
onreset 当表单重置时触发，给form表单整体添加
onchange 当表单内容发生改变时触发（ input type=“text”、 textarea、select、keygen、单选、多选）
onselect 当用户选择文本触发
onsearch 用户向搜索域输入文本时触发（）按下回车或点“x”时触发

html代码
<form id="myForm">
        oninput事件<input type="text"><br>
        onfocus事件<input type="text"><br>
        onblur事件<input type="text"><br>
        onsubmit事件<input type="submit"><br>
        onreset事件<input type="reset"><br>
        onchange事件<input type="text"><br>
        onselect事件<input type="text"><br>
        onsearch事件<input type="search"><br>
    </form>

js代码
var oForm = document.getElementById('myForm');
    var aIpts = document.getElementsByTagName('input');

    aIpts[0].oninput = function(e){
        console.log('oninput事件',this.value);
        console.log(e);

        console.log('---------------------------------------');
    }

    aIpts[1].onfocus = function(e){
        console.log('onfocus事件');
        console.log(e);
        console.log('---------------------------------------');
    }

    aIpts[2].onblur = function(e){
        console.log('onblur事件');
        console.log(e);
        console.log('---------------------------------------');
    }

    oForm.onsubmit = function(e){
        console.log('onsubmit事件');
        console.log(e);
        console.log('---------------------------------------');
    }

    oForm.onreset = function(e){
        console.log('onsubmit事件');
        console.log(e);
        console.log('---------------------------------------');
    }
    aIpts[5].onchange = function(e){
        console.log('onchange事件');
        console.log(e);
        console.log('---------------------------------------');
    }

    aIpts[6].onselect = function(e){
        console.log('onselect事件');
        console.log(e);
        console.log('---------------------------------------');
    }

    aIpts[7].onsearch = function(e){
        console.log('onsearch事件');
        console.log(e);
        console.log('---------------------------------------');
}
补充知识点
uer-select: none; 文本不被选中
例如：
h1{
user-select: none;
}
伪类选择器：

:focus 获取焦点时，设置样式
::selection 当文本被选择时修改样式
css代码
   p{
            user-select: none;
        }
        h3::selection{
            color: antiquewhite;
            background-color: chartreuse;
            font-size: 25px;
        }
        input:focus{
            background-color: antiquewhite;
            color: aqua;
        }

html代码
    <p>月上柳梢头，人约黄昏后</p>
    <h3>赌书消得泼茶香，当时只道是寻常</h3>
    <input type="text">

剪贴板事件
oncopy 当用户拷贝内容时触发
oncut 当用户剪切内容时触发
onpaste 当用户粘贴内容到元素中时触发
onselectstart 当用户选中元素内容时触发
html代码
    <h3>这是一个h3标签</h3>
    <input type="text">

js代码

 var oH3 = document.getElementsByTagName('h3')[0];
        var oIpt = document.getElementsByTagName('input')[0];
        
        // document.oncopy = function(){   // 整个页面都有效
        //     console.log('oncopy事件');
        // }
            oH3.oncopy = function(){
                console.log('oncopy事件');
            }


            oH3.oncut = function(){
                console.log('oncut事件');
            }

            oIpt.onpaste = function(){
                console.log('onpaste事件');
            }

拖拽事件

ondrag 当元素正在拖拽时触发
ondragstart 当元素开始拖拽时触发
ondragend 当元素拖拽结束时触发
补充
draggable ：控制元素是否可以被拖拽

<p draggable='false'>禁止拖动</p>
<p draggable='true'>允许拖动（默认）</p>

打印事件

onbeforeprint 在页面即将开始打印时触发
框架事件
onscroll 当文档滚动时触发
onresize 当窗口或者框架被重新调整大小时触发
onload 内容加载完成时触发

以上是暂时比较重要的

媒体事件

oncanplay 当缓冲完成后触发
onend 当视频或音频
onplay 当视频或音频开始播放时触发
onpause 事件在视频或音频暂停时触发

总结
今天学习的几个事件中，键盘事件、表单事件是其中最为重要的，那么今晚的练习呢是基于键盘事件的基础上展开的。具体是通过上下左右键控制小方块的移动，那这里我对js部分进行一个复盘：首先我们要给文档设置键盘按下的事件，通过if条件分别给上下左右键设置不同的作用，然后通过按键便实现效果了。
css代码

#wrap {
            height: 600px;
            width: 600px;
            border: 5px solid;
            margin: 50px auto;
            position: relative;
        }

        #box {
            width: 50px;
            height: 50px;
            background-color: aquamarine;
            position: absolute;
            left: 0;
            top: 0;
        }

html代码

<div id="wrap">
        <div id="box"></div>
    </div>

js代码

 // 获取元素
    var oWrap = document.getElementById('wrap');
    var oBox = document.getElementById('box');
    var right = 0;   // 存放距左边的像素
    var tops = 0;   // 存放距顶部的像素
    document.onkeydown = function (e) {
        if (e.which == 39) {    // 右键
            if (right < 550) {
                right+=10;
                oBox.style.left = right + 'px';
            }
        } else if (e.which == 37) {  // 左键
            if (right > 0) {
                right-=10;
                oBox.style.left = right + 'px';
            }
        } else if (e.which == 38) {  // 下键
            if (tops > 0) {
                tops-=10;
                oBox.style.top = tops + 'px';
            }
        } else if (e.which == 40) {  // 上键
            if (tops < 550) {
                tops+=10;
                oBox.style.top = tops + 'px';
            }
        }
    }