【键盘事件】
键盘按下的时候触发
t.onkeydown = function (){
console.log('键盘我按下了');
}
连续敲击的时候触发
t.onkeypress = function (){
console.log('连续按下键盘并抬起的时候触发');
}
键盘抬起的时候触发
t.onkeyup = function (){
console.log('键盘我抬起了');
}
顺序 onkeydown > onkeypress > onkeyup
【事件的默认行为】
let a = document.querySelector('a');
a.onclick = function (e){
取消默认事件 两种方法
this.style.background = 'red'
return false
事件源对象里面的取消默认事件的方法
e.preventDefault(); }
这两种禁用方式的区别是
return false会阻止下面代码的执行 方法已经结束了
e.preventDefault()不会阻止下面代码执行
鼠标点击的位置
div1.onclick = function (e){
鼠标在文档（是文档document不是div1）的X轴的位置
console.log(e.clientX);
鼠标在文档（是文档document不是div1）的Y轴的位置
console.log(e.clientY);
}
【拖拽组件】
div1.onmousedown = function (e){
按下的时候 获取点的位置 到盒子边界距离
let areaX = e.clientX - div1.offsetLeft;
let areaY = e.clientY - div1.offsetTop;
document.onmousemove = function (e){
移动的时候获取的client的动态距离 - 盒子内点的到边缘的固定距离
最后获得的 就是 盒子到文档的距离
div1.style.left = e.clientX - areaX + 'px'
div1.style.top = e.clientY - areaY + 'px'
}
}
div1.onmouseup = function (){
document.onmousemove = null;
}
用户界面事件，script在页面前面
当整个页面被加载完成(包括img图片也完全加载完毕)的时候调用
window.onload = function () {
因为执行js获取dom的时候 元素还没加载 所以获取不到
let div1 = document.getElementById('div1')
div1.onclick = function (e){
console.log(e.target.innerText);
}
// console.log(div1.innerHTML);
}
当页面尺寸发生变化的时候 dom文档已经加载完毕了
window.onresize = function () {
console.log('页面尺寸改变了');
document.getElementById('div1').style.background='red'
}
