JavaScript-事件和事件对象、实现键盘打字小游戏

JavaScript-事件和事件对象

一．事件介绍

事件一般是用于浏览器和用户操作进行交互。最早是IE和Netscape Navigator中出现，作为分担服务器端运算负载的一种手段。直到几乎所有的浏览器都支持事件处理。而DOM2级规范开始尝试以一种复合逻辑的方式标准化DOM事件。IE9、Firefox、Opera、Safari和Chrome全都已经实现了“DOM2级事件”模块的核心部分。IE8之前浏览器仍然使用其专有事件模型。
JavaScript有三种事件模型：内联模型、脚本模型和DOM2模型。

1.鼠标事件，页面所有元素都可触发

click：当用户单击鼠标按钮或按下回车键时触发。

input.onclick = function () {alert('Mumu');
};

dblclick：当用户双击主鼠标按钮时触发。

input.ondblclick = function () {alert('Mumu');
};

mousedown：当用户按下了鼠标还未弹起时触发。

input.onmousedown = function () {alert('Mumu');
};

mouseup：当用户释放鼠标按钮时触发。

input.onmouseup = function () {alert('Mumu');
};

mouseover：当鼠标移到某个元素上方时触发。

input.onmouseover = function () {alert('Mumu');
};

mouseout：当鼠标移出某个元素上方时触发。

input.onmouseout = function () {alert('Mumu');
};

mousemove：当鼠标指针在元素上移动时触发。

input.onmousemove = function () {alert('Mumu');
};

2.键盘事件

keydown：当用户按下键盘上任意键触发，如果按住不放，会重复触发。

   onkeydown = function () {alert('Mumu');};

keypress：当用户按下键盘上的字符键触发，如果按住不放，会重复触发。

onkeypress = function () {alert('Mumu');
};

keyup：当用户释放键盘上的键触发。

onkeyup = function () {alert('Mumu');
};

3.HTML事件

load：当页面完全加载后在window上面触发，或当框架集加载完毕后在框架集上触发。

window.onload = function () {alert('Mumu');
};

unload：当页面完全卸载后在window上面触发，或当框架集卸载后在框架集上触发。

window.onunload = function () {alert('Mumu');
};

select：当用户选择文本框(input或textarea)中的一个或多个字符触发。

   input.onselect = function () {alert('Mumu');};

change：当文本框(input或textarea)内容改变且失去焦点后触发。

input.onchange = function () {alert('Mumu');
};

focus：当页面或者元素获得焦点时在window及相关元素上面触发。

input.onfocus = function () {alert('Mumu');
};

blur：当页面或元素失去焦点时在window及相关元素上触发。

input.onblur = function () {alert('Mumu');};

submit：当用户点击提交按钮在元素上触发。

form.onsubmit = function () {alert('Mumu');
};

reset：当用户点击重置按钮在元素上触发。

form.onreset= function () {alert('Mumu');};

resize：当窗口或框架的大小变化时在window或框架上触发。

window.onresize = function () {alert('Mumu');
};

scroll：当用户滚动带滚动条的元素时触发。

window.onscroll = function () {alert('Mumu');
};

         var input = document.querySelector("input");var showcode = document.createElement("div");showcode.style.width = "200px";showcode.style.height = "200px";showcode.style.backdroundColor = 'rgba(0,0,0,0.6)';showcode.style.position = "fixed";showcode.style.left = "200px";showcode.style.top = "200px";document.body.appendChild(showcode);input.onkeydown =function(event){showcode.innerHTML=event.key;}

二、实现打字小游戏

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>Document</title><link rel="stylesheet" href="../css/tanchuang.css" /><script src="../js文件/popwindows.js"></script></head><style>#showCode {background-color: rgba(0, 0, 0, 0.4);text-align: center;width: 200px;height: 200px;position: fixed;left: 200px;top: 200px;line-height: 200px;font-size: 40px;color: aliceblue;}button {width: 80px;height: 30px;background-color: orange;border: none;}button:hover {background-color: rgb(134, 202, 247);}</style><body><div id="showCode"></div><button >开始</button><script>/* 键盘落下事件onkeydown键盘按下事件onkeypress键盘弹起事件onkeyup*/var score = 0;var startbtn = document.querySelector("button");var showcode = document.querySelector("div");/* 定义一个方法,随机生成一个大写字母，将这个字符的内容显示在div上面*/function randomCode() {var randomNum = 97 + parseInt(Math.random() * 26);var randomStr = String.fromCharCode(randomNum);var ucStr = randomStr.toUpperCase();showcode.innerHTML = ucStr;}/* 监听键盘输入事件获取输入的值，将值和当前内容进行比较 */document.body.onkeypress = function(event) {var keyCode = event.key.toUpperCase();var content = showcode.innerHTML;if (keyCode == content) {console.log("打字正确，得分加1");score++;randomCode();}};var fn10 = function() {Alert({title: "打字速度",content: "您每分钟能敲" + score + "单词",confirmDivfn: function() {score = 0;showcode.innerHTML = "";btnListen();},cancelfn: function() {showcode.innerHTML = "<h4>游戏结束</h4>";startbtn.style.display = "none";clearTimeout();}});};function btnListen() {startbtn.onclick = function() {var a = showcode.innerHTML;if (a == "") {randomCode();setTimeout(fn10, 10000);clearTimeout();}};}btnListen();/* setTimeout 每间隔十秒钟调用一次fn10函数  十秒等于一万毫秒 */</script></body>
</html>

tanchuang.css

* {margin: 0;padding: 0;box-sizing: border-box;
}
.shade {display: flex;top: 0;left: 0;width: 100%;height: 600px;background-color: rgba(0, 0, 0, 0.5);
}
.shade .popwindows {width: 400px;height: 300px;background-color: #f2f2f2;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);display: flex;flex-direction: column;
}
.shade .popwindows .tltle {position: relative;display: flex;flex-direction: row;align-items: center;width: 100%;flex: 1;border-bottom: 1px solid #bdb8b8;
}
.shade .popwindows .tltle .text {flex: 1;float: left;padding-left: 10px;font-family: "微软雅黑";
}
.shade .popwindows .tltle .exit {width: 30px;height: 30px;background-image: url("../js学习/imag/cuohao.png");background-repeat: no-repeat;background-position: center center;background-size: 20px auto;float: right;margin-right: 10px;
}
.shade .popwindows .content {width: 100%;flex: 3;line-height: 40px;font-size: 13px;margin-left: 10px;font-family: '宋体';
}
.shade .popwindows .endbtn {display: flex;justify-content: center;align-items: center;width: 100%;flex: 1;border-top: 1px solid #bdb8b8;
}
.shade .popwindows .endbtn .btn{width: 80px;text-align: center;height: 30px;line-height: 30px;font-size: 15px;background-color: #979797;
}
.shade .popwindows .endbtn .btn:nth-child(1){margin-right: 10px;
}
.shade .popwindows .endbtn .btn:nth-child(2){margin-right: 10px;
}
.shade .popwindows .endbtn .btn:hover{background-color: #f68c4e;
}

popwindows.js

/*
var args = {
title:"温馨提示",
content:"是否添加一个页面生成一个蓝色div",
confirmDivfn:function(){var a = document.createElement("div");a.style.backgroundColor = "red";a.style.width = "100px";a.style.height = "100px";body.appendChild(a);
},
cancelfn:function(){body.removeChild(shade);}
}
*/
function Alert(args) {var shade = document.createElement("div");shade.className = "shade";shade.innerHTML =`<div class="popwindows"><div class="tltle"><div class="text"><h3>` +args.title +`</h3></div><div class="exit"></div></div><div class="content"><h4>` +args.content +`</h4></div><div class="endbtn"><div class="btn confirm">确定</div><div class="btn cancel">取消</div></div></div>`;document.body.appendChild(shade);var cancel = document.querySelector(".btn.cancel");var confirmDiv = document.querySelector(".btn.confirm");confirmDiv.onclick = function() {/* 此处输入确认事件的内容*/args.confirmDivfn();document.body.removeChild(shade);};cancel.onclick = function() {/* 此处输入取消事件的内容 */args.cancelfn();document.body.removeChild(shade);};};