day23
一、DOM尺寸和位置
1.只能获取到内联style属性的CSS样式中的宽和高，如果有，获取;如果没有，则返回空 $('.box1').style.width $('.box1').style.height $'.box1').style.backgroundColor
2.返回了元素大小，但没有单位，默认单位是px，如果设置了其他的单位，比如100em之类，返回出来的结果还会转换为px像素（不含边框） width + padding值 $('.box2').clientWidth $('.box2').clientHeight
3.获取左边框和上边框的宽度 $('.box2').clientLeft $('.box2').clientTop
4.返回了元素大小，默认单位是px。如果没有设置任何CSS的宽和高度，他会得到计算后的宽度和高度, 包含盒模型中除margin以外的宽高（包含边框）最稳定，使用最频繁 $('.box3').offsetWidth $('.box3').offsetHeight
5.获取滚动内容的元素大小（当元素出现滚动条时，此属性指全部滚动内容的宽高）返回了元素大小，默认单位是px。如果没有设置任何CSS的宽和高度，它会得到计算后的宽度和高度 整个内容的 $('.box4').scrollWidth $('.box4').scrollHeight
二、offset家族
offsetWidth 获取元素的宽度（width+padding+border） offsetHeight 获取元素的高度（width+padding+border） offsetLeft 获取元素距离容器素左边的距离（需要定位参照） offsetTop 获取元素距离容器素上边的距离（需要定位参照） offsetParent 获取父元素（需要定位参照）
三、鼠标事件
// onclick：当用户单击鼠标按钮或按下回车键时触发
$('button:nth-child(1)').onclick = function(){
console.log('哈哈1')
}
// ondblclick：当用户双击主鼠标按钮时触发 - 连续点击两次
$('button:nth-child(2)').ondblclick = function(){
console.log('哈哈2')
}
// onm ousedown：当用户按下了鼠标还未弹起时触发 - 弹窗测试最明显
// $('div').onmousedown = function(){
// console.log('张涛按下了')
// }
// onm ouseup：当用户释放鼠标按钮时触发 - 鼠标抬起
// $('div').onmouseup = function(){
// console.log('张涛抬起了')
// }
var box = $('div')
// 注意点：onmouseleave要求必须离开事件源标记才能触发
box.onmouseleave = function(){
console.log('离开')
}
// box.onmouseout = function(){
// console.log('离开2')
// }
// onm ouseenter 当鼠标指针移动到元素上时触发
box.onmouseover = function(){
console.log('移入')
}
// onm ouseover：当鼠标移到某个元素上方时触发
// onm ouseout：当鼠标移出某个元素上方时触发
// onm ousemove：当鼠标指针在元素上移动时触发
四、getComputedStyle
获取各种样式，参数1表示要获取那个元素的样式，参数2表示伪对象，方法后面点上属性 var box = $('div') // console.log(getComputedStyle(box, null).width) // console.log(getComputedStyle(box).height) // console.log(getComputedStyle(box).backgroundColor) // console.log(getComputedStyle(box).left) // console.log(getComputedStyle(box).fontSize)
// console.log(getComputedStyle(box, 'after').width)
function getStyle(ele, attr){
return getComputedStyle(ele)[attr]
}
console.log(getStyle(box, 'width'))
五、html事件
浏览器的默认行为： + 表单提交、a超链接跳转、选中文字的行为、右键菜单等等都属于浏览器的默认行为 + 阻止浏览器默认行为： => return false 常用（推荐） => e.preventDefault() 除了IE浏览器以外其他浏览器使用的（标准浏览器） => e.returnValue = false IE浏览器使用的，其他的浏览器使用不了
onselectstart：主要是用于禁止用户选中网页中的文字的默认行为
onselectstart = function(e){
// return false（常用）
// e.preventDefault()
// e.returnValue = false
}
oncontextmenu 事件在元素中用户右击鼠标时触发并打开上下文菜单
oncontextmenu = function(){
return false
}
六、表单事件
// onselect：当用户选中文本框(input 或 textarea)中的一个或多个字符触发
// $('input').onselect = function(){
// $('span').innerHTML = '选中内容了'
// }
// onchange：当用户改变文本框(input 或 textarea)内容时且失去焦点后触发
// $('input').onchange = function(){
// $('span').innerHTML = '你已经修改了数据'
// }
// onfocus：当页面或者元素获得焦点时触发
// $('input').onfocus = function(){
// $('span').innerHTML = '请输入内容'
// }
// onblur：当页面或元素失去焦点时触发
// $('input').onblur = function(){
// if(this.value.trim() === ''){
// $('span').innerHTML = '内容不能为空'
// return
// }
// if(this.value.trim().length >= 6 ){
// $('span').innerHTML = '字符长度在1-6位'
// return
// }
// $('span').innerHTML = '输入正确'
// }
// onsubmit：当用户点击提交按钮在<form>元素上触发
// oninput 事件在用户输入时触发
$('input').oninput = function(){
console.log(this.value)
}
七、键盘事件
// onkeydown：当用户按下键盘上任意键触发，如果按住不放，会重复触发
// onkeydown = function(){
// console.log('键盘按下了')
// }
// onkeyup：当用户释放键盘上的键触发 - 当按键抬起时触发
// onkeyup = function(){
// console.log('键盘抬起了')
// }
// onkeypress：当用户按下键盘上的字符键触发，如果按住不放，会重复触发 不能触发 例如：ALT, CTRL, SHIFT, ESC --- 不是字符键
// onkeypress = function(){
// console.log('hello')
// }
// 使文本框输入不了数字
onkeydown = function(e){
// e.keyCode 拿到键盘键对应的ASCII码
// 数字键范围48 --- 57
// console.log(e.keyCode)
if(e.keyCode>=48 && e.keyCode<=57){
return false
}
}
八、event.html
event + 用来记录一些事件发生时的相关信息的对象，每次事件发生的时候，会在函数或方法内部产生一个事件对象，这个事件对象就是event + 事件对象只有事件才有，事件对象里面存储了很多好用的属性，可以帮助咱们完成一些需求 + 怎么使用事件对象？ => 需要在事件的事件处理函数里面传递一个形参，这个形参可以是任意名称，但是一般情况下为了语义化推荐大家使用event、e、ev等等 + 事件对象属性 => e.keyCode 获取键盘键对应的ASCII码 => e.clientX 获取鼠标的横坐标（x） => e.clientY 获取鼠标的纵坐标（y） => e.pageX 获取鼠标的横坐标（x）--- 包含浏览器网页向上卷去的位置 => e.pageY 获取鼠标的纵坐标（y）--- 包含浏览器网页向上卷去的位置 => e.offsetX 获取事件源距离自身左边的距离（横坐标） => e.offsetY 获取事件源距离自身上边的距离（纵坐标） + 兼容写法 => var e = e || window.event (IE)
如果形参没有传递进去，想要使用必须写完整，使用event
九、拖拽
var son = $('.son')
// 当鼠标按下的时候进行拖拽 onm ousedown
son.onmousedown = function(e){
// 获取鼠标坐标，需要绑定移动事件，因为移动事件可以连续获取 onm ousemove
/*
问题1
+ 当进行元素移动的时候，移动的不是那么丝滑，动不动会出现卡顿的情况
+ 原因
=> 移动事件是绑定给son元素的，只有鼠标在son元素里面才能获取鼠标坐标，才能进行赋值操作
=> 当鼠标移动的快的时候，很容易鼠标移出son元素的范围，移出了范围当然获取不到鼠标坐标，元素在移动的过程中肯定不丝滑
+ 解决方案
=> 可以把移动事件绑定给其他的元素，这样可以扩大移动的范围
问题2
+ 当鼠标无论在son元素的任意位置按下时，最终移动的时候都会光标跑到左上位置
+ 原因
=> 当你鼠标按下的时候，获取鼠标坐标，赋值的时候元素默认都是从0的位置开始移动的，其实光标的位置没有改变，只是元素从左上位置变成赋值后的位置了，
看起来鼠标的坐标变化了
+ 解决方案
=> 当鼠标按下的时候，先获取到当前鼠标在事件源中的位置
=> 当元素进行移动的时候，从鼠标坐标上减去对应的offsetX和offsetY的值即可
*/
// son.onmousemove = function(e){
// var x = e.pageX
// var y = e.pageY
// son.style.left = x + 'px'
// son.style.top = y + 'px'
// }
var l = e.offsetX
var t = e.offsetY
document.onmousemove = function(e){
var x = e.pageX - l
var y = e.pageY - t
son.style.left = x + 'px'
son.style.top = y + 'px'
}
}
// 当鼠标抬起的时候清除移动事件
document.onmouseup = function(){
document.onmousemove = null
}
标签：function,触发,console,log,元素,学习,HarmonyOS,关于,鼠标
From： https://blog.csdn.net/m0_72035166/article/details/141958833