前端学习记录 2022.09.14——Dom事件

83 阅读2分钟

事件的绑定方法:

1.行内绑定 
    执行函数必须定义在全局
    this:永远指向window
    arguments
2.在js中绑定
    远古蛇对象.onclick=函数对象 
    一个事件只能绑定一个函数
    this:谁触发指向谁
3.在js中绑定
    添加事件监听
    一个对象,同一个事件可以绑定多个函数
    与阿奴对象.addEventListenner('事件名',函数对象[函数名、匿名函数、箭头函数])

事件冒泡:

子元素触发的事件会向父元素传递
点击事件从里到外执行

事件委托:

原理是冒泡,存在于父子关系
当父元素和子元素绑定同样函数时,可以把事件委托给父元素,在父元素上绑定

事件捕获:

从外到里执行函数
通过addEvenListenner的第三个参数开启:
true:捕获    false:冒泡(默认)

事件对象:事件触发后自动创建的

描述事件的状态:绑定的元素,触发的坐标
指向绑定的元素event.currentarget
指向触发元素:event.target
clientX/clientY 可视区域左上角为0点,不包含滚动条
layerX/layerY  文档左上角,包含滚动条
offsetX/offsetY  基于触发元素的左上角为0
pageX/pageY  文档左上角,包含滚动条
screenX/screenY  屏幕左上角

获取事件对象:

1.行内
    行内的函数括号中传event对象
2.js中
    自动向函数对象的第0个参数传事件对象
    
# 阻止冒泡排序:
    event.stopropagetion()
# 组织默认行为,键盘事件的默认行为是按键盘默认行为
    event.preentDefault()

鼠标事件:

onclick:单击事件

ondblclick:双击

oncontextmenu:右键菜单

onmouseover:鼠标移入  子元素会冒泡

onmouseout:鼠标移出   子元素会冒泡

onmouseenter:鼠标移入  子元素不会冒泡

onmouseleave:鼠标移出   子元素不会冒泡

onmousedown:鼠标按下

onmouseup:鼠标松开

onmousemove:鼠标移动

滚轮事件:
    区分上下:wheelDelta  +120/-120   向上/向下

键盘事件:

onkeydown:按下任意键触发
onkeyup:弹起时触发
onkeypress:按下任意键触发

表单事件:

onchange:表单元素值改变时触发
onblur:失去焦点时触发
oninput:每次 输入/删除 时触发
onfocus: 获取焦点时触发

元素常用对象属性:

scrollHeight:滚动条高度
scroollTop:滚动条的顶部距离
        =0   最顶部
        =scroollHeight 最底部
clientHeight/clientwith   包括内边距,不包括外边距
offsetHeight/offsetwidth   包括滚动条宽高