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);};};
