事件的绑定方法:
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 包括滚动条宽高