标签：距离 cti 类型 offsetx node ntc font page 方式
事件：主要有三个部分。
事件源：出发事件的源头 例如obox、oul 等
事件类型：通过什么行为触发事件 例如onclick、onmousedown 等
事件处理函数： 触发这个行为，要做的事情 function。
obox.onclick = function(){
console.log(1)
}
点击 obox 在控制台会出现 1
事件对象
事件对象的元素获取
var obox =document.querySelector(".box") //选中了一个class名为box的对象 可以加#选中id
var op =document.querySelectorAll("p") //选中了所有的p标签返回了一个叫做op的数组
var obox=document.getElementById("kaka") //选中了一个id为kaka的元素
var obox=document.getElementsByClassName("xaxa") //选中了一个class为xaxa的元素
var aspan =document.getElementByTagName("span") //拿到了span的标签名
var auser=document.getElementsByName（‘user‘） //拿到name为user的的元素
坐标属性
坐标是定位对象和鼠标的移动
可视区域的宽和高
obox.clientWidth
obox.clientHeight
包括滚动区域的宽高（在有溢出自适应的情况下会产生滚动条，但也会产生距离）
obox.scrollWidth
obox.scrollHeight
可视边框的区域的高度
obox.offsetWidth
obox.offsetHeight
元素相对于包含块的偏移的位置
obox.offsetTop
obox.offsetLeft
滚动时产生的left 和Top
obox.scrollLeft
obox.ScrollTop
=============================================================================
鼠标相对于事件源的坐标
.offsetX
.offsetY
鼠标相对于可是页面的坐标
.clientX
.elientY
鼠标相对于页面的坐标
.pageX
.pageY
鼠标相对于整个屏幕的坐标
.screenX
.ScreenY
事件对象的关系获取
DOM的关系选择器
父元素选子元素
obox.children 返回一个数组
子元素选父元素
~~~.parentNode 返回一个元素
第一个子元素
obox.fristElementChild
最后一个子元素
obox.ladtElementChild
上一个兄弟元素
obox.previousElementSibling
下一个兄弟元素
obox.nextElementSibling
=========================================》
这里是Dom的其他元素选择器
父元素选子元素
事件源
事件类型
按键的获取
事件冒泡
默认事件
绑定事件的方式：
DOM0级（赋值式）
DOM2级（监听式）
事件委托：
事件源
事件冒泡
事件流的状态
事件捕获
目标
事件冒泡
标签：距离 cti 类型 offsetx node ntc font page 方式
原文地址：https://www.cnblogs.com/goodboyzjm/p/11439676.html
