键盘事件
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';
}
}
}