- UI事件(不一定与用户操作有关的事件)
- load当页面完全加载后在window上触发图片也可以触发load事件
- resize当窗口大小变化时在window上触发
- (除火狐外其他浏览器会在浏览器窗口变化1像素时就触发事件,而火狐是在用户停止调整窗口大小时才触发。不建议在此事件中加入大计算量代码,因为可能频繁执行,导致浏览器速度变慢。另外窗口最大最小化也会触发事件)
- scroll当用户滚动带滚动条的元素中的内容时,在该元素上面触发
- 鼠标事件
- 事件类型
- onclick(单击)
- ondblclick(双击)
- oncontextmenu(右键菜单)
- onmouseover 移入
- onmouseout 移出
- onmouseenter 移入
- onmouseleave 移出
- 建议使用enter和leave
- 因为over和out在进入移出子级标签时会触发
- onmousedown(按下)
- onmouseup(抬起)
- onmousemove(移动)
- 事件对象:包含了该事件所有的相关信息
- d1.onclick = function(e){} e:事件对象
- 坐标位置
- screenX 在屏幕中的x坐标
- screenY 在屏幕中的y坐标
- 相对于body
- clientX 表示事件发生时鼠标指针在视口中的水平坐标(不包含滚动距离)
- clientY 在视口中的垂直坐标
- IE没有(不建议使用,但等于上面二者)
- pageX 在页面中的x坐标(包含滚动距离)
- pageY 在页面中的y坐标
- 获取点击目标的坐标(有兼容性)
- offsetX offsetY
- clientX-offsetLeft
- 事件类型
- 键盘事件
- keydown当用户按下键盘上的任意键时触发,按住不动将重复触发
- keyup当用户释放键盘上的键时触发
- event.keyCode 键码
- keypress当用户按下键盘上的字符键时触发,按住不动重复触发
- event.charCode 键码
- event.charCode键码(ASCIl编码形式展示,需通过String.fromCharCode()方法转换,lE9以下不支持)
- event.charCode 键码
- shiftkey,altkey,ctrlkey
- 补充:e.keycode 键码值,判断按键的标准
- 表单事件
- focus元素获得焦点时触发
- blur元素失去焦点时触发
- submit()提交表单
- change当input、textarea元素value值改变且失去焦点时,select元素选项改变时触发
- input当input、textarea元素value值改变同步触发事件,select元素选项改变时触发
- 有兼容问题
- 阻止冒泡
- fn stoppropagation() 非IE
- pro cancelBubble = true IE
- 阻止默认
- fn preventDefault() 非IE
- pro returnValue = true IE
案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
width: 100vw;
height: 100vh;
background-image: url(https://img1.baidu.com/it/u=103880656,1409660226&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500);
background-size: 100% 100%;
}
.keys {
display: flex;
justify-content: center;
align-items: center;
width: 600px;
height: 120px;
background-color: rgba(255, 255, 255, .5);
border-radius: 60px;
position: absolute;
bottom: 50px;
left: 50%;
margin-left: -300px;
}
@font-face {
font-family: 'arraw';
src: url(../day_9/font/iconfont.ttf);
}
.keys p {
font-family: 'arraw';
font-size: 60px;
width: 60px;
height: 60px;
line-height: 60px;
color: #fff;
}
.levle {
font-size: 50px;
color: #fff;
}
.keys .ok {
color: gold;
text-shadow: 0 0 5px tomato;
}
</style>
</head>
<body>
<div class="keys">
<!-- <p></p> -->
</div>
<p class="levle">关卡
<span id="level">1</span>
</p>
</body>
<script>
var dKeys = document.querySelector(".keys");
var spanLevel = document.querySelector("#level");
var level = 1; //关卡
var now = 0; //点前点击的按键所对应的箭头下标
//键盘事件
window.onkeydown = function (e) {
//获取所有的箭头标签
var arraws = dKeys.children;
//空格 确认结果
var le = level > 25 ? 25 : level;
if (now === le && e.keyCode === 32) {
//全按对了
level++;
spanLevel.innerHTML = level++;
now = 0;
setKeys();
}
if (e.keyCode === arraws[now].keyIndex) {
//按对了
arraws[now].className = 'ok';
now++;
} else {
//按错了 从头开始
for (i = now - 1; i >= 0; i--) {
//把之前的按对的按钮样式去掉
arraws[i].className = '';
}
now = 0;
}
}
//生成箭头的函数
function setKeys() {
//每次进来,清空箭头
dKeys.innerHTML = '';
//箭头的数据源
var arr = ['', '', '', ''];
var ki = [37, 38, 39, 40]; //对应的keyCode
//最多生成10个箭头
var le = level > 25 ? 25 : level;
for (var i = 0; i < le; i++) {
var index = rand(0, 4);
//生成arraw
var p = document.createElement("p");
p.innerHTML = arr[index];
p.keyIndex = ki[index]; //方便和e.keyCode进行对比
dKeys.appendChild(p);
}
// var index = rand(0, 4);
}
setKeys();
//随机函数
function rand(min, max) {
return Math.floor(Math.random() * (max - min) + min);
}
</script>
</html>
结果如下: