-
okeydown键盘按下的时候触发
-
onkeypress连续敲击的时候触发
-
onkeyup键盘抬起的时候触发
-
顺序onkeydown>onkeypress>onkeyup
-
onload事件在资源被加载完成后会被触发
-
onresize 事件会在窗口或框架被调整大小时发生
取消默认事件两种用法
-
return false -
preventDefault
文档到x,y轴的距离位置
<script>
let div1 = document.getElementById('div1')
div1.onclick = function (e){
/* 鼠标在文档(是文档document不是div1)的X轴的位置 */
console.log(e.clientX);
/* 鼠标在文档(是文档document不是div1)的Y轴的位置 */
console.log(e.clientY);
}
</script>
拖拽事件
let div1 = document.getElementById('div1')
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;//空值
}