1.事件
click mouseover 等等这是事件，onclick onmouseover 表示 一个监听机制 当监听到你做哪个动作 我就要给你相应的回馈。
鼠标事件：
click、mousedown(按下)、mousemove（移动）、mouseup（抬起）、contextmenu（右键）、mouseover（覆盖）、mouseout（离开）
键盘事件：
keydown > keypress > keyup
keypress 返回ASCII值 通过这个值 查到 对应的什么字母
document.onkeypress=function (e) {
console.log(String.fromCharCode(e.charCode));
}
3.文本操作事件
input,focus（焦点）,blur(失去焦点),change（内容改变）
<script>
var input=document.getElementsByTagName('input')[0];
input.oninput=function () {
this.style.color="#424242"
}
input.onblur=function () {
if (this.value=="") {
this.value="请输入用户名";
}}
input.onfocus=function () {
if (this.value=="请输入用户名") {
this.value="";
}
}
</script>
2.事件对象
var div=document.getElementsByTagName('div')[0];
div.onclick = function (a) {
var a=event||winodw.event;
console.log(a)
};
使用案例
var ul=document.getElementsByTagName('ul')[0];
ul.onclick=function (e) {
console.log(e)
var event= e||window.enent;
var target=event.target||event.srcElement;
console.log(target.innerText)
}
3.方块运动：
这里涉及到的知识点：
1. event.pageX 和 event.pageY [ 鼠标横向纵向距离]
2.鼠标点击的位置 其实就是 event.pageX -left（偏移量）
<style>
div{ 200px;height: 200px;background-color: red;}
</style>
</head>
<body>
<div style="position: absolute;left: 20px;top: 10px;"></div>
<script>
var div=document.getElementsByTagName('div')[0];
var a,
b;
div.onmousedown=function (e) {
a=e.pageX-parseInt(div.style.left);
b=e.pageY-parseInt(div.style.top);
document.onmousemove=function (e) {
var event=e||window.event;
div.style.left=e.pageX-a+"px";
div.style.top=e.pageY-b+"px";
}
document.onmouseup=function () {
document.onmousemove = null;
}
}
</script>