一、键盘事件
1.onkeydown 键盘按下事件
按键按下的时候触发
2.onkeyup 键盘抬起事件
某个键盘按键弹起的时候触发
3.keyCode 判断按下什么键 得到的是 ascll码值 不区分大小写
document.addEventListener('keyup',function(e){
console.log('up:'+e.keyCode);
})
4.keypress 判断按下什么键 区分大小写 a和A得到的都是65
document.addEventListener('keypress',function(e){
console.log('preess:'+e.keyCode);
})
练习
在输入框中输入 字符 按下回车的时候把输入的字 alert出来
代码如下：
<input type="text" name="" id="te">
<script>
let te = document.querySelector('#te');
te.onkeydown = function(e){
let eobj = e || event;
if(eobj.keyCode == 13){
alert(eobj.target.value);
}
}
</script>
二、页面加载属性
1.onload 当整个页面被加载完成的时候调用
语法：
window.onload = function(){
let div1 = document.querySelector('.div1');//调用class为div1的元素
console.log(div1);
}
2.onresize 当页面尺寸改变的时候调用它
语法：
window.onresize = function(){
console.log('页面尺寸改变了');
}
练习
js在head里面写，点击div，aler出div里面的文字。如果页面尺寸改变了，就给div加上红色的背景。 代码如下：
<!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>
<script>
window.onload = function(){
let div1 = document.querySelector('.div1');
div1.onclick = function(){
alert(div1.innerHTML);
}
window.onresize = function(){
div1.style.background = 'red';
}
}
</script>
</head>
<body>
<div class="div1" style="width: 200px;">
我是div
</div>
</body>
</html>
三、鼠标事件MouseEvent
1.e.clientX 鼠标再document文档的x轴坐标，e.clientY 鼠标在document文档的y坐标
使用它只是在你视觉位置里顶部的距离
<script>
document.addEventListener('click',function (e){ //监听点击事件
console.log(e.clientX);//控制台打印鼠标在文档的x轴
console.log(e.clientY);//控制台打印鼠标在文档的y轴
})
</script>
2.pageX 鼠标在浏览器的x坐标，pageY 鼠标在浏览器的y坐标
使用它是你整个body高度的x和y的位置
<!-- <style>
body{
height: 3000px;
}
</style>
<script>
document.addEventListener('click',function (e){
console.log(e.clientX);
console.log(e.clientY);
console.log('---------');
console.log(e.pageX);
console.log(e.pageY);
})
</script> -->
四、阻止默认事件
阻止默认事件的两种方法
- return false
- e.preventDefault();
这两种方法的区别是：return false会阻止下面代码的执行 方法已经结束了
。
e.preventDefault()不会阻止下面代码执行。
例如：
阻止a标签跳转：
<a href="http://www.baidu.com">a </a>
<script>
let a= document.querySelector('a');
a.onclick = function(e){
// return false;
e.preventDefault();
}
</script>
鼠标右击事件oncontxtmenu
禁止鼠标右击：
document.oncontextmenu=function(e){
e.preventDefault();
}
onselectstart—禁止选中
禁止选中：
document.addEventListener('selectstart',function (e){
e.preventDefault();
})
练习
设置一个高宽100px的div,背景色随意 让他可以在页面中随意拖动 代码如下：
<div style="width: 100px;height:100px;background-color:rebeccapurple; position: relative;"></div>
<script>
let div = document.querySelector('div');
div.onmousedown = function(e){
let areX = e.clientX - div.offsetLeft;
let areY = e.clientY - div.offsetTop;
document.onmousemove = function(e){
div.style.left = e.clientX - areX + 'px';
div.style.top = e.clientY - areY + 'px';
}
}
div.onmouseup = function(e){
document.onmousemove = function(e){
div.style.left = div.offsetLeft; + 'px';
div.style.top = div.offsetTop; + 'px';
}
}
</script>
