js总结(9)事件和事件对象
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{width: 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>